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

来源：互联网发布：手机网络时间校准编辑：程序博客网时间：2024/06/14 08:01

这里写图片描述

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

<!DOCTYPE html><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+、手机、ipadhttp://www.areaaperta.com/nicescroll/配置参数 当调用“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）

0 0

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

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

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