ios 滚动穿透苹果滚动插件

转载

墨舞天涯 2023-07-24 15:34:12

文章标签 ios 滚动穿透滚动条插件 ci sed html 文章分类 iOS 移动开发

Tiny Scrollbar是基于jQuery的滚动条插件, 风格简洁, 可自定义样式, 体积较小。

插件特点：

支持iPhone, iPad, Android
新版1.8，可以在移动设备上滚动内容
可以在水平方向和垂直方向滚动
支持滚轮,拇指、跟踪、触摸。
它有一个更新函数,这样它就可以处理内容的变化。
拇指大小的滚动条,可以设置为自动或固定数量
容易定制
支持正常的滚动和移动风格转化的滚动。
轻量级其只有100行代码。大小是2,29 kb
样式可以自己设置，很自由。

使用的方法很简单。前提你要调用jquery文件，像这样：

<scriptsrc="http://www.qingdou.me/jquery.js"type="text/javascript"></script>
<scriptsrc="http://www.qingdou.me/jquery.tinyscrollbar.min.js"type="text/javascript"></script>//滚动条插件文件

tiny scrollbar 下载

接下来我们来看一下具体是怎么使用的？
调用Jquery文件后，只需在页面调用

$('#scrollbar1').tinyscrollbar();

html代码：

<divid="scrollbar1">//调用外包类名是不可以改的
<divclass="scrollbar"><divclass="track"><divclass="thumb"><divclass="end"></div></div></div></div>//滚动条样式，track为滚动条轨道，thumb为滚动按钮，end可以设置滚动按钮上或下的样式。
<divclass="viewport">相对定位层，内容在这里滚动
<divclass="overview">要滚动条的内容，在它的里面可以防止你想滚动的任何内容
<h3>Magnis dis parturient montes</h3>//这些是可以更改的区域
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae velit at velit pretium sodales. Maecenas egestas imperdiet mauris, vel elementum turpis iaculis eu. Duis egestas augue quis ante ornare eu tincidunt magna interdum. Vestibulum posuere risus non ipsum sollicitudin quis viverra ante feugiat. Pellentesque non faucibus lorem. Nunc tincidunt diam nec risus ornare quis porttitor enim pretium. Ut adipiscing tempor massa, a ullamcorper massa bibendum at. Suspendisse potenti. In vestibulum enim orci, nec consequat turpis. Suspendisse sit amet tellus a quam volutpat porta. Mauris ornare augue ut diam tincidunt elementum. Vivamus commodo dapibus est, a gravida lorem pharetra eu. Maecenas ultrices cursus tellus sed congue. Cras nec nulla erat.</p>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque eget mauris libero. Nulla sit amet felis in sem posuere laoreet ut quis elit. Aenean mauris massa, pretium non bibendum eget, elementum sed nibh. Nulla ac felis et purus adipiscing rutrum. Pellentesque a bibendum sapien. Vivamus erat quam, gravida sed ultricies ac, scelerisque sed velit. Integer mollis urna sit amet ligula aliquam ac sodales arcu euismod. Fusce fermentum augue in nulla cursus non fermentum lorem semper. Quisque eu auctor lacus. Donec justo justo, mollis vel tempor vitae, consequat eget velit.</p>
</div>
</div>
</div>

css样式：

#scrollbar1 { width: 520px; clear: both; margin: 20px 0 10px; }
#scrollbar1 .viewport { width: 500px; height: 200px; overflow: hidden; position: relative; }
#scrollbar1 .overview { list-style: none; position: absolute; left: 0; top: 0; }
#scrollbar1 .thumb .end,
#scrollbar1 .thumb { }
#scrollbar1 .scrollbar { position: relative; float: right; width: 15px; }
#scrollbar1 .track { height: 100%; width:13px; position: relative; padding: 0 1px; }
#scrollbar1 .thumb { height: 20px; width: 13px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
#scrollbar1 .thumb .end { overflow: hidden; height: 5px; width: 13px; }
#scrollbar1 .disable{ display: none; }
.noSelect {-select:;-o-user-select:;-moz-user-select:;-khtml-user-select:;-webkit-user-select:;}

部分需要自己的需要调整，滚动条样式等。上面是一个简单的例子

如何滚动横向的内容呢？

$('#scrollbar2').tinyscrollbar({:'x'});

相关样式：

/* Tiny Scrollbar scrollbar2 */
#scrollbar2 { width: 251px; margin: 20px 0 10px; }
#scrollbar2 .viewport { width: 236px; height: 125px; overflow: hidden; position: relative; }
#scrollbar2 .overview { list-style: none; width: 1416px; padding: 0; margin: 0; position: absolute; left: 0; top: 0; }
#scrollbar2 .scrollbar{ position: relative; margin: 0 0 5px; clear: both; height: 15px; }
#scrollbar2 .track { background:#ccc; width: 100%; height:5px; position: relative; }
#scrollbar2 .thumb { background:#cc0071; height: 5px; cursor: pointer; overflow: hidden; position: absolute; left: 0; top: 0; }
#scrollbar2 .disable { display: none; }
.noSelect {-select:;-o-user-select:;-moz-user-select:;-khtml-user-select:;-webkit-user-select:;}

如何改变轨道大小track