第一个：https://blog.csdn.net/libin_1/article/details/51443775
第二个：http://www.freejs.net/article_fenye_559.html
注释：这两个都是没有滚动条的插件 ；
详解第一个：
下载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>
插件参数介绍：
修改代码快捷调试：https://jsfiddle.net/inuyaksa/thohu1se/；
jQuery滚动条插件兼容ie6+、手机、ipad
http://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）
第二种详解：
<script type="text/javascript"> $('#content').infinitescroll({ loading: { msgText: "", img: "images/loading.gif", finishedMsg: '没有新数据了哦...', selector: '.loading' //loading选择器 }, navSelector: "#pages", //导航的选择器，会被隐藏 nextSelector: "#next", //包含下一页链接的选择器 itemSelector: "p", //你将要取回的选项(内容块) debug: true, //启用调试信息，若启用必须引入debug.js dataType: 'html', //格式要和itemSelector保持一致 maxPage: 5, //最大加载的页数 // animate: true, //当有新数据加载进来的时候，页面是否有动画效果，默认没有 extraScrollPx: 150, //滚动条距离底部多少像素的时候开始加载，默认150 // bufferPx: 40, //载入信息的显示时间，时间越大，载入信息显示时间越短 errorCallback: function() { //加载完数据后的回调函数 }, path: function(index) { //获取下一页方法 return "page.php?p=" + index; }, }, function(newElements, data, url) { //回调函数 //console.log(data); //alert(url); }); </script>
<div class="container"> <div class="demo"> <div id="content"> <p> <a>360度产品展示,js+图片</a> </p> <p> <a>Js表单验证 email验证</a> </p> <p> <a>一组超酷的CSS3 3D按钮</a> </p> <p> <a>简单的纯css下拉导航菜单</a> </p> <p> <a>放大镜效果 微型图 中型图与放大的图片 外部放大和内部放大</a> </p> <p> <a>一个翻书的效果，上一页下一页</a> </p> <p> <a>可以增加不同滤镜效果的焦点图，带缩略图</a> </p> <p> <a>滚动调整图片大小</a> </p> <p> <a>鼠标经过伸缩的导航菜单</a> </p> <p> <a>prettyPhoto 插件的使用 图片组浏览器 异步加载，iframe内容加载 弹出层</a> </p> </div> <div id="pages"><a id="next" href="page.php?page=1">下一页</a></div> <div class="loading"></div> </div>