zoukankan      html  css  js  c++  java
  • jquery.nicescroll.min.js滚动条使用方法

    jquery.nicescroll.min.js滚动条使用方法,Nicescroll 是制作自定义滚动条的jq插件。支持div,iframe,html等使用,兼容IE7-8,safari,firefox,webkit内核浏览器(chrome,safari)以及智能终端设备浏览器的滚动条。

    页面使用:

    $("html").niceScroll({ 
    cursorcolor:"#E62020", 
    cursoropacitymax:1, 
    touchbehavior:false, 
    cursor"10px", 
    cursorborder:"0", 
    cursorborderradius:"5px"

    })

    nicescroll详细参数配置:

    cursorcolor - 设置滚动条颜色,默认值是“#000000”
    cursoropacitymin - 滚动条透明度最小值
    cursoropacitymax - 滚动条透明度最大值
    cursorwidth - 滚动条的宽度像素,默认为5(你可以写“5PX”)
    cursorborder - CSS定义边框,默认为“1px solid #FFF”
    cursorborderradius - 滚动条的边框圆角
    ZIndex的 - 改变滚动条的DIV的z-index值,默认值是9999
    scrollspeed - 滚动速度,默认值是60
    mousescrollstep - 滚动鼠标滚轮的速度,默认值是40(像素)
    touchbehavior - 让滚动条能拖动滚动触摸设备默认为false
    hwacceleration - 使用硬件加速滚动支持时,默认为true
    boxzoom - 使变焦框的内容,默认为false
    dblclickzoom - (仅当boxzoom = TRUE)变焦启动时,双点击框,默认为true
    gesturezoom - boxzoom = true并使用触摸设备)变焦(仅当激活时,间距/盒,默认为true
    grabcursorenabled“抢”图标,显示div的touchbehavior = true时,默认值是true
    autohidemode,如何隐藏滚动条的作品,真正的默认/“光标”=只光标隐藏/ FALSE =不隐藏
    的背景下,改变铁路背景的CSS,默认值为“”
    iframeautoresize中,AUTORESIZE iframe上的load事件(默认:true)
    cursorminheight,设置最低滚动条高度(默认值:20)
    preservenativescrolling,您可以用鼠标滚动本地滚动的区域,鼓泡鼠标滚轮事件(默认:true)
    railoffset,您可以添加抵消顶部/左轨位置(默认:false)
    bouncescroll,使滚动反弹结束时的内容移动(仅硬件ACCELL)(默认:FALSE)
    spacebarenabled,允许使用空格键滚动(默认:true)
    railpadding,设置间距(默认:顶:0,右:0,左:0,底部:0})
    disableoutline,Chrome浏览器,禁用纲要(橙色hightlight)时,选择一个div nicescroll(默认:true)

    官方参数说明:

    cursorcolor - change cursor color in hex, default is "#000000"
    . cursoropacitymin - change opacity very cursor is inactive (scrollabar "hidden" state), range from 1 to 0, default is 0 (hidden)
    . cursoropacitymax - change opacity very cursor is active (scrollabar "visible" state), range from 1 to 0, default is 1 (full opacity)
    . cursorwidth - cursor width in pixel, default is 5 (you can write "5px" too)
    . cursorborder - css definition for cursor border, default is "1px solid #fff"
    . cursorborderradius - border radius in pixel for cursor, default is "4px"
    . zindex - change z-index for scrollbar div, default value is 9999
    . scrollspeed - scrolling speed, default value is 60
    . mousescrollstep - scrolling speed with mouse wheel, default value is 40 (pixel)
    . touchbehavior - enable cursor-drag scrolling like touch devices in desktop computer, default is false
    . hwacceleration - use hardware accelerated scroll when supported, default is true
    . boxzoom - enable zoom for box content, default is false
    . dblclickzoom - (only when boxzoom=true) zoom activated when double click on box, default is true
    . gesturezoom - (only when boxzoom=true and with touch devices) zoom activated when pinch out/in on box, default is true
    . grabcursorenabled, display "grab" icon for div with touchbehavior = true, default is true
    . autohidemode, how hide the scrollbar works, true=default / "cursor" = only cursor hidden / false = do not hide
    . background, change css for rail background, default is ""
    . iframeautoresize, autoresize iframe on load event (default:true)
    . cursorminheight, set the minimum cursor height in pixel (default:20)
    . preservenativescrolling, you can scroll native scrollable areas with mouse, bubbling mouse wheel event (default:true)
    . railoffset, you can add offset top/left for rail position (default:false)
    . bouncescroll, enable scroll bouncing at the end of content as mobile-like (only hw accell) (default:false)
    . spacebarenabled, enable page down scrolling when space bar has pressed (default:true)
    . railpadding, set padding for rail bar (default:{top:0,right:0,left:0,bottom:0})
    . disableoutline, for chrome browser, disable outline (orange hightlight) when selecting a div with nicescroll (default:true)
    . horizrailenabled, nicescroll can manage horizontal scroll (default:true)
    . railalign, alignment of vertical rail (defaul:"right")
    . railvalign, alignment of horizontal rail (defaul:"bottom")
    . enabletranslate3d, nicescroll can use css translate to scroll content (default:true)
    . enablemousewheel, nicescroll can manage mouse wheel events (default:true)
    . enablekeyboard, nicescroll can manage keyboard events (default:true)
    . smoothscroll, scroll with ease movement (default:true)
    . sensitiverail, click on rail make a scroll (default:true)
    . enablemouselockapi, can use mouse caption lock API (same issue on object dragging) (default:true)
    . cursorfixedheight, set fixed height for cursor in pixel (default:false)
     

    页面使用:

    <!--<script type="text/javascript">

    $(document).ready(function(){

        $(".content_box").niceScroll();

      //$("html").niceScroll();

    });

    </script>-->

    content_box为滚动内容容器

    只需以上两步即可使用,无需css等。

    下载地址:jquery.nicescroll.min.js点击下载

    http://areaaperta.com/nicescroll/  官网

    本文由红蜘蛛网络联盟(www.rswebun.com)整理编辑。

  • 相关阅读:
    面向对象(Object Oriented)
    文件操作
    函数
    dict--字典
    list--列表
    Ubuntu_18.04安装网易云音乐
    初识数据类型
    css控制内容显示,自动加"..."
    css固定元素位置(fixed)
    解决IE下iframe默认有白色背景的bug
  • 原文地址:https://www.cnblogs.com/reweb/p/3268775.html
Copyright © 2011-2022 走看看