jQuery 滚动条插件之移动端 左右滑动不出现滚动条

jQuery 滚动条插件之移动端 左右滑动不出现滚动条_第1张图片

下载demo:http://download.csdn.net/detail/cometwo/9523908


<html>

    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jquery.nicescroll无滚动条左右拖拽 - 站长素材title>
        <link href="css/zzsc.css" type="text/css" rel="stylesheet" />
        <script src="js/jquery.min.js">script>
        <script src="js/jquery.nicescroll.js">script>
        <style type="text/css">
            body {
                width: 100%;
                background: white;
            }

            #main {
                padding: 1px;
                overflow: hidden;
            }
        style>
        <script>
            $(document).ready(function() {
                var nicesx = $("#boxscroll").niceScroll("#boxscroll div", {
                    touchbehavior: true,
                    cursorcolor: "#FF00FF",
                    cursoropacitymax: 0.6,
                    cursorwidth: 24,
                    usetransition: true,
                    hwacceleration: true,
                    autohidemode: "hidden"
                });
            });
        script>
    head>

    <body>
        <div id="main">
            <div id="boxscroll">
                <div>
                    <img src="images/timg.jpg" width="83" height="83" onmousedown="return false" />
                    <img src="images/timg.jpg" width="83" height="83" onmousedown="return false" />
                    <img src="images/timg.jpg" width="83" height="83" onmousedown="return false" />
                    <img src="images/timg.jpg" width="83" height="83" onmousedown="return false" />
                    <img src="images/timg.jpg" width="83" height="83" onmousedown="return false" />
                    <img src="images/timg.jpg" width="83" height="83" onmousedown="return false" />
                    <img src="images/timg.jpg" width="83" height="83" onmousedown="return false" />
                    <img src="images/timg.jpg" width="83" height="83" onmousedown="return false" />
                    <img src="images/timg.jpg" width="83" height="83" onmousedown="return false" />
                    <img src="images/timg.jpg" width="83" height="83" onmousedown="return false" />
                div>
            div>
            <h1>仿百度左右滑动无滚动条仿百度左右滑动无滚动条h1>
            <style type="text/css">
                .num1 {
                    width: 99%;
                    height: 150px;
                    border: 1px solid red;
                    overflow: scroll;
                }

                .num2 {
                    width: 2000px;
                    height: 150px;
                }

                div.class1 {
                    width: 200px;
                    height: 130px;
                    float: left;

                }
            style>
            <div class="num1">
                <div class="num2">
                    <div class="class1" style="background: red;">div>
                    <div class="class1" style="background: green;">div>
                    <div class="class1" style="background: blue;">div>
                    <div class="class1" style="background: fuchsia;">div>
                div>
            div>
        div>
    body>

html>
jQuery滚动条插件兼容ie6+、手机、ipad
http://www.areaaperta.com/nicescroll/
配置参数 
当调用“niceScroll”你可以传递一些参数来定制视觉方面:
cursorcolor - 十六进制改变光标颜色,默认值是“#000000” 
cursoropacitymin - 改变不透明度非常光标处于非活动状态(scrollabar“隐藏”状态),范围从10, 
默认为0(隐藏) 
cursoropacitymax - 改变不透明度非常光标处于活动状态(scrollabar“可见”状态),范围从10,默 
认值是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

你可能感兴趣的:(web前端学习)