美化滚动条插件mCustomScrollbar.js的使用示例

最新推荐文章于 2024-03-14 11:53:48 发布
最新推荐文章于 2024-03-14 11:53:48 发布
阅读量8k 收藏 2
点赞数
分类专栏： jQuery插件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011500781/article/details/50771943
版权

请在这里查看示例 ☞ 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>



vcxiaohan2
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery.mCustomScrollbar自定义滚动条插件
01-17
jquery.mCustomScrollbar自定义滚动条插件，包含官方源码，源码中包含DEMO，包含简单本地DEMO，即拿即用
【H5】mCustomScrollbar 动态加载 滚轮
ranmaxli的博客
09-05 522
function test() { ajaxRes("url", "post", { params: params, beforeSend: function() { // 异步加载，先销毁之前的渲染： $(".hisScroll").mCustomScrollbar("destroy"); }, ...
bootstrap-table滚动条利用 mCustomScrollbar 插件美化滚动条，完美解决横向滚动条 偏移bug
success could be revenge的博客
01-17 3793
------------------------20190119 bug 修复-------------------------------- var exec = true; //切换滚动条 $("#" + _id).on('scroll-body.bs.table', function (e) { //销毁 $(e.target).pare...
nanoScrollerJS: 高性能滚动条插件
最新发布
gitblog_00023的博客
03-14 335
nanoScrollerJS: 高性能滚动条插件 简介 nanoScrollerJS 是一款轻量级的 jQuery 插件，提供了一个美观且高性能的滚动条解决方案。它适用于移动设备和桌面应用，可以在各种现代浏览器上运行。 应用场景 nanoScrollerJS 可用于多种场景，包括但不限于： 自定义滚动条样式：通过 nanoScrollerJS，您可以轻松自定义滚动条的外观，使其与您的网站设计完美...
HTML + JQUERY的mCustomScrollbar插件实现滚动条，兼容火狐浏览器
qq_38883889的博客
10-08 551
HTML + JQUERY插件实现滚动条，兼容火狐浏览器需求实现方法三级目录 需求 最近做的一个项目，客户要求浏览器端要自定义滚动条宽高，几经折腾使用css方式实现了谷歌浏览器端口，但始终无法兼容火狐，最后使用一个JQuery插件解决了。 实现方法 不说太多废话直接上代码。 三级目录 ...
使用jquery.mCustomScrollbar自定义滚动条（1）
weixin_30456039的博客
03-29 132
参考博客：https://blog.csdn.net/cdnight/article/details/41351505 api网址：http://manos.malihu.gr/jquery-custom-content-scroller/# 常用的theme： dark light light-2 light-3 light-thick light-thin d...
jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法
热门推荐
一名普通码农的菜地
11-21 5万+
jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法 系统默认的滚动条样式，真的已经看的够恶心了。试想一下，如果在一个很有特色和创意的网页中，出现了一根系统中默认的滚动条样式，会有多么的别扭。 为了自己定义网页中的滚动条的方法，我真的已经找了很久了，就目前寻找的成果来说，找到了两个比较不错的 jQuery 插件：jScrollPane
jQuery自定义滚动条样式插件mCustomScrollbar
weixin_30955617的博客
07-03 287
如果你构建一个很有特色和创意的网页，那么肯定希望定义网页中的滚动条样式，这方面的 jQuery 插件比较不错的，有两个：jScrollPane和mCustomScrollbar。 关于 jScrollPane，大家见过的可能比较多，但是这个插件太过于古老而且功能不强大，效果在几年前非常不错，但是放在现在就不好说了。所以我选择了后者：mCustomScrollbar。下图是两者官方示...
mCustomScrollbar.js自定义滚动条…
SinceroTu的博客
10-10 1375
在写网页的过程中，我们经常会遇到自定义滚动条，自定义滚动条与浏览器默认样式有很大差别，而且还不易改，这是我们就需要好用的插件啦！！！ mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件，它可以让你灵活的通过 CSS 定义 网 页的滚动条，并且垂直和水平两个方向的滚动条都可以定义。并且在滚动的过程中，还可以缓冲滚动使得滚动更加的平滑，还可以自动调整滚动条的位置和定义
JavaScript的外部引入方式
人类工程师的博客
09-07 363
document.writeln("hello world"); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-.
mCustomScrollbar.js 漂亮的滚动条插件 适应内容自动更新
徐同保的专栏
08-03 1623
  &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;mCustomScrollbar 漂亮的滚动条插件 适应内容自动更新&lt;/title&gt; &lt;link href="https://c
自定义美化滚动条jquery-mCustomScrollbar插件
03-20
实现了自定义美化滚动条jquery插件，主要用了jquery滚动条插件jquery.mCustomScrollbar.js，原下载地址：http://www.jq-school.com/Detail.aspx?id=348
jquery全屏滑块拖动横向图片滚动特效代码
03-20
Jquery全屏滑块拖动横向图片滚动是一款支持鼠标滚动滚动切换的jquery特效。
scrollbar.js:一个独立JavaScript插件，用于用自定义滚动条替换物理滚动条
05-21
scrollbar.js 警告：插件未积极维护！ 一个独立JavaScript插件，用于用自定义滚动条替换物理滚动条。 移动设备保留其本机滚动条。 演示版 查看。 执照
jquery.nicescroll仿IOS滚动条美化插件.zip
07-11
jquery.nicescroll仿IOS滚动条美化插件
全屏滚动插件fullPage.js使用实例解析
10-21
主要为大家解析了全屏滚动插件fullPage.js使用实例,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jQuery全屏滚动插件fullPage.js示例源码.rar
09-02
jQuery全屏滚动插件fullPage.js示例源码，支持全屏、自动、上下、左右滚动
省市区选择插件jquery.cityselect.js的使用示例
vcxiaohan的博客
04-05 8416
实例化的时候注意路径就好了 教程： http://www.imuum.com/plugin-jquery-cityselect-js-provinces-linkage-effect.html
新手引导插件intro.js的使用示例
vcxiaohan的博客
03-15 8114
intro * {margin: 0; padding: 0;} .f {margin: 30px 50px; background: red;} .b {display: inline-block;} qqqqqqqqqqqqqqqqqq 这是第1个引导 '>这是第2个引导 使用html元素丰富介绍
vue使用print.js打印滚动条失效
05-24
使用 print.js 打印时，由于打印页面的大小和原页面大小不一致，可能会导致一些样式失效，包括滚动条。你可以尝试在打印之前隐藏滚动条，打印完成后再显示滚动条。 可以使用以下代码实现： ```javascript // 隐藏滚动条 document.body.style.overflow = 'hidden'; // 使用 print.js 打印 // 打印完成后显示滚动条 document.body.style.overflow = 'auto'; ``` 另外，如果使用的是 vue，可以在打印时使用 `this.$nextTick()` 等待页面渲染完成再隐藏滚动条，以避免一些渲染问题。具体代码如下： ```javascript printJS({ printable: 'printable-element-id', type: 'html', onPrintDialogClose: function() { // 等待页面渲染完成 this.$nextTick(() => { // 隐藏滚动条 document.body.style.overflow = 'hidden'; }); }, onError: function(error) { console.error(error); } }); ``` 同样，在打印完成后也需要使用 `this.$nextTick()` 等待页面渲染完成再显示滚动条。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值