本文主要是介绍美化滚动条插件mCustomScrollbar.js的使用示例，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
请在这里查看示例 ☞ mCustomScrollbar示例
1 兼容性：ie8+
2 需要3个资源(js、css、mCSB_buttons.png)
3 <div><p>1212321321321</p></div>，p的内容很长，而div是固定宽高的时候，应用在div上
4 自己写的滚动条插件 ☞ jquery-plugins/scrollbar/
<!doctype html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta name="renderer" content="webkit"> <title>demo</title> <link rel="stylesheet" href="css/jquery.mCustomScrollbar.css" /> <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="js/jquery.mCustomScrollbar.concat.min.js"></script> <style> * {margin: 0; padding: 0;} body, html {width: 100%; height: 100%; background: pink; overflow: hidden;} .body {width: 100%; height: 100%; background: grey; position: absolute;} .content {width: 200px; height: 300px; border: 2px solid purple;} .item {border: 2px solid blue;} </style> </head> <body> <div class="body"> <button class="delete">点击删除一个内部的滚动条</button> <button class="scrollTo">滚动到固定位置</button> <div class="content"> <div class="item"> <input type="text"> <p>这是内部的滚动条</p> <p>这是内部的滚动条</p> </div> <div class="item"> <input type="text"> <p>这是内部的滚动条</p> <p>这是内部的滚动条</p> </div> <div class="item"> <input type="text"> <p>这是内部的滚动条</p> <p>这是内部的滚动条</p> </div> <div class="item"> <input type="text"> <p>这是内部的滚动条</p> <p>这是内部的滚动条</p> </div> <div class="item"> <input type="text"> <p>这是内部的滚动条</p> <p>这是内部的滚动条</p> </div> <div class="item"> <input type="text"> <p>这是内部的滚动条</p> <p>这是内部的滚动条</p> </div> <div class="item"> <input type="text"> <p>这是内部的滚动条</p> <p>这是内部的滚动条</p> </div> </div> <p>这是浏览器的滚动条</p> <p>这是浏览器的滚动条</p> <p>这是浏览器的滚动条</p> <p>这是浏览器的滚动条</p> <p>这是浏览器的滚动条</p> <p>这是浏览器的滚动条</p> <p>这是浏览器的滚动条</p> <p>这是浏览器的滚动条</p> <p>这是浏览器的滚动条</p> <p>这是浏览器的滚动条</p> <p>这是浏览器的滚动条</p> <p>这是浏览器的滚动条</p> <p>这是浏览器的滚动条</p> <p>这是浏览器的滚动条</p> <p>这是浏览器的滚动条</p> <p>这是浏览器的滚动条</p> <p>这是浏览器的滚动条</p> <p>这是浏览器的滚动条</p> <p>这是浏览器的滚动条</p> <p>这是浏览器的滚动条</p> <p>这是浏览器的滚动条</p> <p>这是浏览器的滚动条</p> <p>这是浏览器的滚动条</p> <p>这是浏览器的滚动条</p> <p>这是浏览器的滚动条</p> <p>这是浏览器的滚动条</p> <p>这是浏览器的滚动条</p> <p>这是浏览器的滚动条</p> </div> </body> <script> ;$(function() { //参数配置介绍：http://www.wufangbo.com/mcustomscrollbar/ //一个简单的实例 $(".content").mCustomScrollbar({ scrollButtons: {//上下按钮配置 enable: true,//是否添加按钮 //scrollType: 'pixels',//点击滚动是否有停顿效果 //scrollAmount: 50,//每次点击滚动的距离 }, autoHideScrollbar: true, //theme:"light-thick",//以下是主题 theme:"rounded-dots", //theme:"dark-thin", //theme:"light-3", //theme:"3d-thick", //theme:"3d", //theme:"rounded-dark", //horizontalScroll: true,//创建水平滚动条 //scrollInertia: 0,//滚动惯性 //mouseWheel: false,//是否取消滚轮效果 //mouseWheelPixels: 100,//滚动一下移动的距离 //autoDraggerLength: false,//自动调整滚动条的长度 callbacks: { onScrollStart: function() { $('.body').append('滚动开始//'); }, onScroll: function() { $('.body').append('滚动结束//'); }, onTotalScroll: function() { $('.body').append('滚动至底部//'); }, onTotalScrollBack: function() { $('.body').append('滚动至顶部//'); }, whileScrolling: function() { $('.body').append('...滚动中...//'); }, }, }); //删除 $('.delete').on('click', function() { $('.item:last').remove(); }); //滚动到固定位置 $('.scrollTo').on('click', function() { $(".content").mCustomScrollbar('scrollTo', 300);//可以是string }); //隐藏这是浏览器的滚动条 $('.body').mCustomScrollbar({ scrollButtons: {//上下按钮配置 enable: true,//是否添加按钮 }, }); }); </script>
</html>这篇关于美化滚动条插件mCustomScrollbar.js的使用示例的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
