jQuery.NiceScroll插件

滚动条目前为止各个版本浏览器不统一,有些谷歌能用,有些IE兼容性问题不能用,有些火狐不能使用。所以代替方案用于移动和桌面浏览器上自定义滚动条的jQuery插件。此插件十分简单,能够快速完成需求使用,也解决了本站有HTML实战教程滚动条兼容性问题。

有史以来最好的NiceScroll滚动条插件


这个作者提供了可在浏览器和移动设备方便使用的滚动条插件,资源占用非常低。Nicescroll是一个jquery插件,适用于具有非常类似ios / mobile风格的漂亮滚动条。

感谢Inuyaksa作者提供了开源文件,他的GITHUB:地址

它兼容性非常强大:

  • 兼容所有最新的桌面浏览器和旧版:Chrome,Firefox,Edge,IE8 +,Safari(win / mac),Opera。(所有A级浏览器)
  • 兼容移动设备:iPad / iPhone / iPod,Android 4 +,Blackberry手机和Playbook(WebWorks / Table OS),Windows Phone 8和10。
  • 兼容所有触摸设备:iPad,Android平板电脑,Window Surface。
  • 可与多输入设备(带触摸或笔的鼠标)兼容:Window Surface,触摸笔记本上的Chrome桌面。

如何使用


加载下载或者在线的jquery文件,可以使用1/2/3任何版本,建议使用CDN加速,请在页面末尾增加:

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

把下载的插件,放入根目录,增加在jquery下面:

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="jquery.nicescroll.min.js"></script>

插件初始化代码:

$("body").niceScroll();

更改光标颜色和宽度:

$("body").niceScroll({
      cursorcolor:"#323232",  //颜色
      cursorwidth:"4px"   //宽度
});

激动人心的时刻,连火狐浏览器可以改变了。

进一步强化


在DIV里使用滚动条:

<style>
        .box{
            height: 150px;
            overflow: hidden;
        }
</style>
<div class="box">
  <div class="demo">
      测试<br>
      测试<br>
      测试<br>
      测试<br> 
      测试<br>
      测试<br>
      测试<br>
      测试<br>
      测试
  </div>
</div>

JS对应:

    $(".box").niceScroll(
        ".demo",{
            ursorcolor:"#323232"
    });

十分简单。

更多的自定义


    cursorcolor:"#424242",   //滚动条颜色以十六进制 
    cursoropacitymin:0,       //改变不透明度时滚动条处于非活动状态(scrollabar隐藏状态)时,范围从1到0 
    cursoropacitymax:1,       //当滚动条是改变不透明度active(scrollabar 可见状态),范围从1到0 
    cursorwidth:"5px",        //像素的滚动条宽度(你也可以写"5px") 
    cursorborder:"1px solid #fff ",//滚动条边框 
    cursorborderradius的css定义: " 5px ",//滚动条 
    zindex : " auto "  | [number],//更改滚动条div的滚动索引 
    scrollspeed:60,           //滚动速度 
    mousescrollstep:40,       //使用鼠标滚轮滚动速度(像素) 
    touchbehavior:false,      // DEPRECATED !! 使用"emulatetouch" 
    模拟触控:false,             //启用滚动条拖动滚动,如桌面计算机中的触摸设备 
    hwacceleration:true,      //使用硬件加速滚动支持 
    boxzoom:false,            //启用缩放框内容 
    dblclickzoom:true,        //(仅当boxzoom = true时)双击方框 
    gestzoom: true,    //(仅当boxzoom = true且带有触摸设备时)放大/缩小时激活缩放框 
    grabcursorenabled:true,   //(仅当touchbehavior = true时)显示"抓取"图标 
    autohidemode:true,        //如何隐藏滚动条的工作原理,可能的值:
      true    |                    //没有滚动
      "cursor"|             //只有游标隐藏
      false   |                   //不要隐藏,
      "leave" |                   //只有当指针留下内容
      "hidden "  |    //始终隐藏
      "scroll",                    //仅在滚动 
    background:" ",   //更改css for rail background 
    iframeautoresize:true,   // autoresize iframe on load event 
    cursorminheight:32,       //设置最小游标高度(pixel) 
    preservenativescrolling:true,//你可以用鼠标滚动原生可滚动区域,冒泡鼠标滚轮事件 
    railoffset:false,        //你可以为轨道位置添加偏移顶部/左侧 
    bouncescroll:false,      //(仅HW ACCELL)使滚动在内容作为流动状的端弹跳 
    spacebarenabled:true,     //使页面向下滚动时空格键已经按下 
    railpadding:{top: 0,right: 0,left: 0,bottom: 0 },//为轨道栏设置padding 
    disableoutline:true,      //对于chrome浏览器,在使用nicescroll选择div时禁用大纲(橙色突出显示) 
    horizrailenabled:true,     //nicescroll可以管理水平滚动 
    railalign:right,             //垂直轨道轨道 
    railvalign:bottom,           //水平轨道对齐 
    enabletranslate3d:true,    // nicescroll可以使用css translate滚动内容 
    enablemousewheel:true,     // nicescroll可以管理鼠标滚轮事件 
    enablekeyboard:true,       // nicescroll可以管理键盘事件 
    smoothscroll:true,         //滚动轻松运动 
    sensitiverail:true,        //单击轨道使滚动 
    enablemouselockapi:true,   //可以使用鼠标标题锁API(对象拖动时同样的问题) 
    cursorfixedheight:false,   //在像素 
    hidecursordelay:400,//中设置滚动条的固定高度 以微秒的延迟设置为淡出滚动 
    directionlockdeadzone:6,   //死区中的像素为方向锁定激活 
    nativeparentscrolling: true,//检测内容底部,让家长滚动的,因为天然滚动做 
    enablescrollonselection:true,//使内容自动滚动时,选择文本 
    cursordragspeed:0.3,      //当滚动条拖动选择的速度 
    rtlmode:" auto ",         //水平div滚动从左侧开始 
    cursordragontouch:false,  //拖动滚动条触摸/ touchbehavior模式也是 
    oneaxismousemode:"auto", //允许水平滚动鼠标滚轮只在水平内容上,如果为false(仅垂直)鼠标滚轮不水平滚动,如果值为自动检测到双轴鼠标 
    scriptpath: " "                  //为boxmode定义自定义路径图标( ""=>相同的脚本路径) 
    preventmultitouchscrolling:true, //防止滚动的多点触控事件 
    disablemutationobserver:false, //力MutationObserver禁用, 
    enableobserver:true,          //启用DOM更改观察者,它会尝试在父或内容div更改时调整大小/隐藏/显示 
    scrollbarid:false         //为nicescroll bars设置自定义ID 

其它


官网: https://nicescroll.areaaperta.com/
github开源: https://github.com/inuyaksa/jquery.nicescroll

发表评论