精华内容
下载资源
问答
  • nicescroll

    2018-10-16 18:24:51
    nicescroll 滚动条插件是一个非常强大的基于 jQuery 的滚动条插件,不需要增加额外的css,几乎全浏览器兼容。ie6+,实现只需要一段代码,侵入性非常小,样式可完全自定义,支持触摸事件,可在触摸屏上使用。
  • niceScroll

    2020-11-02 15:02:58
    一个滚动条而已,如何真的有强制要求的话,还是推荐这...script src="lib/jquery.nicescroll.min.js"></script> <script> var nice = $(".zan-header-center").niceScroll({ //是否是触摸式滚动效果

    一个滚动条而已,如何真的有强制要求的话,还是推荐这一款,这个有压缩版都有56K,还是有点大的,都快赶上jq了。个人觉得用原生滚动条就挺好的
    记录以下,以后可能要用到

        <script src="lib/jquery.nicescroll.min.js"></script>
        <script>
            var nice = $(".zan-header-center").niceScroll({
                //是否是触摸式滚动效果
                touchbehavior: false,
                
                verticalenabled:false //水平方向禁用
                //滚动条的颜色值
                // cursorcolor: "#333",    
                //滚动条的透明度值
                // cursoropacitymax: 0.6,  
                //滚动条的宽度值
                // cursorwidth: 1,        
                //滚动条的背景色,默认是透明的
                // background: "#00F",  
                //滚动条是否是自动隐藏,默认值为 true
                // autohidemode: true,      
            });
    
        </script>
    
    展开全文
  • jQuery.NiceScroll v. 3.7.6 The best nicescroll release ever - extremely smooth and consistent in modern browsers and mobile devices, with low resource usage Web Site: nicescroll.areaaperta.com Repo:...
  • jQuery.nicescroll美化滚动条 jQuery.nicescroll美化滚动条
  • Nicescroll用法

    千次阅读 2018-04-11 10:35:42
    Nicescroll滚动条插件是一个非常强大的基于JQUERY的滚动条插件,不需要增加额外的css,几乎全浏览器兼容。ie6+,实现只需要一段代码,侵入性非常小,样式可完全自定义,支持触摸事件,可在触摸屏上使用。 官网地址...

    Nicescroll滚动条插件是一个非常强大的基于JQUERY的滚动条插件,不需要增加额外的css,几乎全浏览器兼容。ie6+,实现只需要一段代码,侵入性非常小,样式可完全自定义,支持触摸事件,可在触摸屏上使用。

    官网地址:http://www.areaaperta.com/nicescroll/

    引入核心文件,插件需要引入1.5.X以上版本的jquery库

    最简单的用法如下:

    $(document).ready(
      function() { 
        $("html").niceScroll();
      }
    );

    配置选项

    $("#thisdiv").niceScroll({
            cursorcolor: "#424242", // 改变滚动条颜色,使用16进制颜色值
            cursoropacitymin: 0, // 当滚动条是隐藏状态时改变透明度, 值范围 1 到 0
            cursoropacitymax: 1, // 当滚动条是显示状态时改变透明度, 值范围 1 到 0
            cursorwidth: "5px", // 滚动条的宽度,单位:便素
            cursorborder: "1px solid #fff", // CSS方式定义滚动条边框
            cursorborderradius: "5px", // 滚动条圆角(像素)
            zindex: "auto" | <number>, // 改变滚动条的DIV的z-index值
            scrollspeed: 60, // 滚动速度
            mousescrollstep: 40, // 鼠标滚轮的滚动速度 (像素)
            touchbehavior: false, // 激活拖拽滚动
            hwacceleration: true, // 激活硬件加速
            boxzoom: false, // 激活放大box的内容
            dblclickzoom: true, // (仅当 boxzoom=true时有效)双击box时放大
            gesturezoom: true, // (仅 boxzoom=true 和触屏设备时有效) 激活变焦当out/in(两个手指外张或收缩)
            grabcursorenabled: true // (仅当 touchbehavior=true) 显示“抓住”图标display "grab" icon
            autohidemode: true, // 隐藏滚动条的方式, 可用的值: 
              true | // 无滚动时隐藏
              "cursor" | // 隐藏
              false | // 不隐藏,
              "leave" | // 仅在指针离开内容时隐藏
              "hidden" | // 一直隐藏
              "scroll", // 仅在滚动时显示        
            background: "", // 轨道的背景颜色
            iframeautoresize: true, // 在加载事件时自动重置iframe大小
            cursorminheight: 32, // 设置滚动条的最小高度 (像素)
            preservenativescrolling: true, // 你可以用鼠标滚动可滚动区域的滚动条和增加鼠标滚轮事件
            railoffset: false, // 可以使用top/left来修正位置
            bouncescroll: false, // (only hw accell) 启用滚动跳跃的内容移动
            spacebarenabled: true, // 当按下空格时使页面向下滚动
            railpadding: { top: 0, right: 0, left: 0, bottom: 0 }, // 设置轨道的内间距
            disableoutline: true, // 当选中一个使用nicescroll的div时,chrome浏览器中禁用outline
            horizrailenabled: true, // nicescroll可以管理水平滚动
            railalign: right, // 对齐垂直轨道
            railvalign: bottom, // 对齐水平轨道
            enabletranslate3d: true, // nicescroll 可以使用CSS变型来滚动内容
            enablemousewheel: true, // nicescroll可以管理鼠标滚轮事件
            enablekeyboard: true, // nicescroll可以管理键盘事件
            smoothscroll: true, // ease动画滚动
            sensitiverail: true, // 单击轨道产生滚动
            enablemouselockapi: true, // 可以用鼠标锁定API标题 (类似对象拖动)
            cursorfixedheight: false, // 修正光标的高度(像素)
            hidecursordelay: 400, // 设置滚动条淡出的延迟时间(毫秒)
            directionlockdeadzone: 6, // 设定死区,为激活方向锁定(像素)
            nativeparentscrolling: true, // 检测内容底部便于让父级滚动
            enablescrollonselection: true, // 当选择文本时激活内容自动滚动
            cursordragspeed: 0.3, // 设置拖拽的速度
            rtlmode: "auto", // DIV的水平滚动从左边开始
            cursordragontouch: false, // 使用触屏模式来实现拖拽
            oneaxismousemode: "auto", // 当只有水平滚动时可以用鼠标滚轮来滚动,如果设为false则不支持水平滚动,如果设为auto支持双轴滚动
            scriptpath: "" // 为boxmode图片自定义路径 ("" => same script path)
            preventmultitouchscrolling: true // 防止多触点事件引发滚动
        });

    另外注意:当在同一页面中使用多个nicescroll插件时,要及时隐藏用完的nicescroll对象,加载时,需要先show,再resize。

    当插件放在具有absolute浮动的容器中,并设置了top值时,插件的top会出现问题,解决方法使用插件的railoffset属性:

    展开全文
  • 本篇文章主要介绍了jQuery中Nicescroll滚动条插件的用法,Nicescroll滚动条插件是一个非常强大的基于jQuery的滚动条插件,有需要的可以了解下。 Nicescroll滚动条插件是一个非常强大的基于jQuery的滚动条插件,不...
  • nicescroll参数

    2016-08-22 14:29:00
    jQuery滚动条插件兼容ie6+、手机、ipad http://www.areaaperta.com/nicescroll/ jQuery(function($){ ... $("#scrollInner").niceScroll({ touchbehavior:false, cursorcolor:"#398F70", ...

    jQuery滚动条插件兼容ie6+、手机、ipad

    http://www.areaaperta.com/nicescroll/

    jQuery(function($){
        
        $("#scrollInner").niceScroll({
            touchbehavior:false,
            cursorcolor:"#398F70",
            cursoropacitymax:1,
            cursorwidth:5,
            cursorborder:"none",
            cursorborderradius:"4px",
            background:"#2F7758",
            autohidemode:false
        });
        
    })

     

     

     

    配置参数 
    当调用“niceScroll”你可以传递一些参数来定制视觉方面:

    cursorcolor - 十六进制改变光标颜色,默认值是“#000000” 
    cursoropacitymin - 改变不透明度非常光标处于非活动状态(scrollabar“隐藏”状态),范围从1到0, 
    默认为0(隐藏) 
    cursoropacitymax - 改变不透明度非常光标处于活动状态(scrollabar“可见”状态),范围从1到0,默 
    认值是1(完全不透明) 
    cursorwidth - 像素光标的宽度,默认值为5(你可以写“加入5px”太) 
    cursorborder - 游标边框css定义,默认为“1px的固体#FFF” 
    cursorborderradius - 以像素为光标边界半径,默认为??“递四方” 
    zIndex的 - 改变z-index值的滚动条的div,默认值是9999 
    scrollspeed - 滚动速度,默认值为60 
    mousescrollstep - 高速滚动鼠标滚轮,默认值是40(像素) 
    touchbehavior - 使光标拖动滚动像在台式电脑触摸设备(默认:false) 
    hwacceleration - 使用硬件加速滚动支持的时候(默认:true) 
    boxzoom - 使变焦框中的内容(默认:false)
    dblclickzoom - (仅当boxzoom = TRUE)变焦激活时,双击对话框(默认:true) 
    gesturezoom - (仅当boxzoom =真实,使用触摸设备)上缩放框激活时,间距输出/输入(默认:true) 
    grabcursorenabled,显示“抢”图标的div touchbehavior = true时,(默认:true) 
    autohidemode,如何隐藏滚动条的作品,真=默认/“光标”=只进游标隐藏/ false =不隐藏背景,CSS改变轨道的背景下,默认为“” 
    iframeautoresize,在加载事件AUTORESIZE的iframe(默认:true) 
    cursorminheight,设置在像素的最小光标高度(默认值:20) 
    preservenativescrolling,您可以滚动本机可滚动区域用鼠标,冒泡鼠标滚轮事件(默认:true) 
    railoffset,您可以添加抵消顶部/左边的轨道位置(默认:false) 
    bouncescroll,使滚动弹跳在内容结尾作为移动像(仅HW ACCELL)(默认:false) 
    spacebarenabled,使向下翻页时,空格键已经按下滚动(默认:true) 
    railpadding,设置填充为铁路吧(默认值:{顶:0,右:0,左:0,下:0}) 
    disableoutline,对于chrome浏览器,停用大纲(橙色hightlight)选择具有nicescroll一个div(默认: 
    true)时, 
    horizrailenabled,nicescroll可以管理水平滚动(默认:true) 
    railalign,取向垂直导轨(defaul:“右”) 
    railvalign,对齐水平导轨(defaul:“底部”) 
    enabletranslate3d,nicescroll可以使用CSS转换为滚动内容(默认:true) 
    enablemousewheel,nicescroll可以管理的鼠标滚轮事件(默认:true) 
    enablekeyboard,nicescroll可以管理键盘事件(默认:true) 
    smoothscroll,滚动自如移动(默认:true) 
    sensitiverail,点击轨道上进行滚动(默认:true) 
    enablemouselockapi,可以用鼠标说明锁的API(对象拖动同样的问题)(默认:true) 
    cursorfixedheight,用于光标在像素设置固定的高度(默认:false) 
    hidecursordelay,设置在微秒淡出滚动条的延迟时间(默认值:400) 
    directionlockdeadzone,在对方向锁定激活像素死区(默认值:6) 
    nativeparentscrolling,检测内容底部,并让家长来滚动,作为原生滚动做(默认:true)
    enablescrollonselection,启用自动滚动的内容时,选择文本(默认:true)

    转载于:https://www.cnblogs.com/qdphr/p/5795494.html

    展开全文
  • niceScroll.js

    2020-11-19 18:17:04
    一、NiceScroll 介绍 NiceScroll 是一款完全基于 jQuery 框架的滚动条插件,它不仅有着类似 iOS 系统设备的滚动条外观,而且还兼容各个浏览器。 二、基本用法 1,最简单的用法 (1)我们只需在页面初始化完毕后,对...

    一、NiceScroll 介绍
    NiceScroll 是一款完全基于 jQuery 框架的滚动条插件,它不仅有着类似 iOS 系统设备的滚动条外观,而且还兼容各个浏览器。

    二、基本用法
    1,最简单的用法
    (1)我们只需在页面初始化完毕后,对需要使用这个滚动条插件的元素调用 niceScroll() 方法即可。

    先引入jq和nicescroll

    <script src="js/jquery-3.1.1.js" charset="utf-8"></script>         
    <script src="js/jquery.nicescroll.js" charset="utf-8"></script>
    

    在页面加载后,调用

    $("html").niceScroll();
    
    **2.隐藏滚动条**
    
    注意:这个只是把滚动条隐藏,使用鼠标滚轮仍然可以进行滚动。
    $("#div1").getNiceScroll().hide();
    

    3.重置滚动条大小

    $("#div1").getNiceScroll().resize();
    
    **4.滚动到某个指定位置**
    
    //水平方向滚动(距左侧100px)
    $("#div1").getNiceScroll(0).doScrollLeft(100);
    //垂直方向滚动(距上方100px)
    $("#div1").getNiceScroll(0).doScrollTop(100);
    

    三、常用配置参数

    $("#div1").niceScroll({
            cursorcolor: "#424242", // 改变滚动条颜色,使用16进制颜色值
            cursoropacitymin: 0, // 当滚动条是隐藏状态时改变透明度, 值范围 1 到 0
            cursoropacitymax: 1, // 当滚动条是显示状态时改变透明度, 值范围 1 到 0
            cursorwidth: "5px", // 滚动条的宽度,单位:便素
            cursorborder: "1px solid #fff", // CSS方式定义滚动条边框
            cursorborderradius: "5px", // 滚动条圆角(像素)
            zindex: "auto", // 改变滚动条的DIV的z-index值(auto或数字)
            scrollspeed: 60, // 滚动速度
            mousescrollstep: 40, // 鼠标滚轮的滚动速度 (像素)
            touchbehavior: false, // 激活拖拽滚动
            hwacceleration: true, // 激活硬件加速
            boxzoom: false, // 激活放大box的内容
            dblclickzoom: true, // (仅当 boxzoom=true时有效)双击box时放大
            gesturezoom: true, // (仅 boxzoom=true 和触屏设备时有效) 激活变焦当out/in(两个手指外张或收缩)
            grabcursorenabled: true, // (仅当 touchbehavior=true) 显示“抓住”图标display "grab" icon
            autohidemode: true, // 隐藏滚动条的方式, 可用的值如下:
            /**
              true  无滚动时隐藏
              "cursor"  隐藏
              false 不隐藏,
              "leave" 仅在指针离开内容时隐藏
              "hidden" 一直隐藏
              "scroll" 仅在滚动时显示
            **/
            background: "", // 轨道的背景颜色
            iframeautoresize: true, // 在加载事件时自动重置iframe大小
            cursorminheight: 32, // 设置滚动条的最小高度 (像素)
            preservenativescrolling: true, // 你可以用鼠标滚动可滚动区域的滚动条和增加鼠标滚轮事件
            railoffset: false, // 可以使用top/left来修正位置
            bouncescroll: false, // (only hw accell) 启用滚动跳跃的内容移动
            spacebarenabled: true, // 当按下空格时使页面向下滚动
            railpadding: { top: 0, right: 0, left: 0, bottom: 0 }, // 设置轨道的内间距
            disableoutline: true, // 当选中一个使用nicescroll的div时,chrome浏览器中禁用outline
            horizrailenabled: true, // nicescroll可以管理水平滚动
            railalign: "right", // 对齐垂直轨道
            railvalign: "bottom", // 对齐水平轨道
            enabletranslate3d: true, // nicescroll 可以使用CSS变型来滚动内容
            enablemousewheel: true, // nicescroll可以管理鼠标滚轮事件
            enablekeyboard: true, // nicescroll可以管理键盘事件
            smoothscroll: true, // ease动画滚动
            sensitiverail: true, // 单击轨道产生滚动
            enablemouselockapi: true, // 可以用鼠标锁定API标题 (类似对象拖动)
            cursorfixedheight: false, // 修正光标的高度(像素)
            hidecursordelay: 400, // 设置滚动条淡出的延迟时间(毫秒)
            directionlockdeadzone: 6, // 设定死区,为激活方向锁定(像素)
            nativeparentscrolling: true, // 检测内容底部便于让父级滚动
            enablescrollonselection: true, // 当选择文本时激活内容自动滚动
            cursordragspeed: 0.3, // 设置拖拽的速度
            rtlmode: "auto", // DIV的水平滚动从左边开始
            cursordragontouch: false, // 使用触屏模式来实现拖拽
            oneaxismousemode: "auto", // 当只有水平滚动时可以用鼠标滚轮来滚动,如果设为false则不支持水平滚动,如果设为auto支持双轴滚动
            scriptpath: "", // 为boxmode图片自定义路径 ("" => same script path)
            preventmultitouchscrolling: true // 防止多触点事件引发滚动
        });
    
    展开全文
  • Nicescroll缩减优化

    2017-05-01 14:18:58
    Nicescroll和SlimScroll简述Nicescroll是一款比较好用的滚动条插件,兼容IE6+,可惜体积比较大,有将近60KB,slimscroll体积较小,只有4.6KB,功能较简单,根据场景可以自己选择。下面是个人修改后的nicescroll,...
  • jQuery 之 niceScroll

    2020-01-13 09:14:41
    niceScroll 在 mounted 或 页面最尾处 使用 1. 基本使用: $('dom').niceScroll() 2. 自定义样式: $('dom').niceScroll({ cursorcolor: 光标颜色 cursorwidth: 光标宽度 cursorborder: 光标边框 ...
  • Nicescroll3是一款仿IOS滚动条样式,支持全屏切换,滚动条美化的jquery.nicescroll插件。
  • niceScroll 的使用

    2021-01-12 11:46:51
    jquery.nicescroll文件下载地址 引入核心文件,插件需要引入1.5.X以上版本的jquery库 <html> <head> </head> <body id="scrollid" style='margin:10px auto; padding-right:12px; overflow:...
  • query.nicescroll无滚动条左右拖拽是一款功能强大的jquery.nicescroll插件,主要用户自定义个滚动条效果。
  • jquery.nicescroll.rar

    2016-05-20 10:04:15
    jquery.nicescroll插件包,内附无缝滚动实例及详细说明
  • 主要介绍了jQuery滚动条美化插件nicescroll简单用法,结合实例形式简单分析了jQuery滚动条美化插件jquery.nicescroll.js的引入与使用技巧,非常简单实用,需要的朋友可以参考下
  • jquery.nicescroll-master

    2019-03-03 16:11:48
    1. 引用 jquery.js 和 jquery.nicescroll.js 1 2 [removed][removed] [removed][removed] 2. 通过 jquery 获取需要添加滚动条的元素,调用 niceScroll 函数进行配置即可使用该插件,如下 1 2 3 4 5 6 7 8 9 $('#...
  • Nicescroll滚动条插件的用法

    万次阅读 2016-10-17 13:50:39
    Nicescroll滚动条插件是一个非常强大的基于JQUERY的滚动条插件,不需要增加额外的css,几乎全浏览器兼容。ie6+,实现只需要一段代码,侵入性非常小,样式可完全自定义,支持触摸事件,可在触摸屏上使用。 官网地址...
  • 一款非常完美的滚动条,简称nicescroll自定义滚动条,兼容性良好,可以完美兼容IE 6 7 8 火狐 谷歌等几乎目前都在用的浏览器,使用方法简单。 只要依次引入jquery库以及jquery.nicescroll插件,然后将需要滚动部分...
  • jQuery仿IOS滚动插件Nicescroll3是一款支持全屏切换,滚动条美化的jquery.nicescroll插件。
  • niceScroll的使用方法

    千次阅读 2019-05-08 16:37:17
    niceScroll的使用方法 $("#thisdiv").niceScroll({ cursorcolor: "#424242", // 改变滚动条颜色,使用16进制颜色值 cursoropacitymin: 0, // 当滚动条是隐藏状态时改变透明度, 值范围 1 到 0 cursoropacitymax: 1...
  • jquery.nicescroll美化滚动条插件鼠标滑过显示 jquery.nicescroll美化滚动条插件鼠标滑过显示
  • 下面小编就为大家带来一篇jQuery niceScroll滚动条错位问题的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • niceScroll滚动条使用

    千次阅读 2019-05-08 20:54:41
    niceScroll滚动条使用 有时候我们可能觉得系统默认的滚动条太丑,想要改变它,虽然可以通过css来改变,但是火狐直接不支持css改变滚动条,所以我们用js来解决 niceScroll官网:https://nicescroll.areaaperta.com/ ...
  • jquery.nicescroll仿IOS滚动条美化插件
  • 制作niceScroll滚动条

    2018-09-10 16:59:09
    1、引用jquery.js和jquery.nicescroll.js &lt;script type="text/javascript" src="js/jquery.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" ...
  • 主要介绍了jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法,实例分析了jquery.nicescroll插件实现图片拖拽效果的方法,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 691
精华内容 276
关键字:

nicescroll