这次给大家带来iScroll实现内容滚动步骤详解（附代码），iScroll实现内容滚动的注意事项有哪些，下面就是实战案例，一起来看一下。
一、iScroll简介
iScroll 是一款针对web app使用的滚动控件，它可以模拟原生IOS应用里的滚动列表操作，还可以实现缩放、拉动刷新、精确捕捉元素、自定义滚动条等功能。这里博主使用的版本iScroll4.25，目前最新版本是iScroll5，大家可以去官网下载。
官网地址：http://iscrolljs.com/
二、iScroll使用方法
1.iScroll使用结构
最优化使用iScroll的结构一般如下所示：
HTML:
- ...
- ...
登录后复制
注：1、iScroll一定要与滚动内容外面的wrapper进行联系才会产生效果。
2、只有wrapper里的第一个子元素才可以滚动。
2、实例化iScroll
iScroll必须在调用之前实例化，实例化代码如下（在head标签中添加如下代码）：
var myscroll;//myscroll是全局变量，可以任意地方调用 function loaded(){ myscroll = new iScroll("wrapper"); } window.addEventListener("DOMContentLoaded",loaded,false);
登录后复制
三、滚动测试实例
HTML+CSS:
var myscroll; function loaded(){ myscroll = new iScroll("wrapper"); } window.addEventListener("DOMContentLoaded",loaded,false);#wrapper { position:absolute; z-index:1; top:45px; bottom:48px; left:0; width:100%; background:#aaa; overflow:auto;}#scroller { position:relative;/* -webkit-touch-callout:none;*/ -webkit-tap-highlight-color:rgba(0,0,0,0); float:left; width:100%; padding:0;}#scroller ul { position:relative; list-style:none; padding:0; margin:0; width:100%; text-align:left;}#scroller li { padding:0 10px; height:40px; line-height:40px; border-bottom:1px solid #ccc; border-top:1px solid #fff; background-color:#fafafa; font-size:14px;}#scroller li > a { display:block;}滚动测试
- Pretty row 1
- Pretty row 2
- Pretty row 3
- Pretty row 4
- Pretty row 5
- Pretty row 6
- Pretty row 7
- Pretty row 8
- Pretty row 9
- Pretty row 10
- Pretty row 11
- Pretty row 12
- Pretty row 13
- Pretty row 14
- Pretty row 15
- Pretty row 16
- Pretty row 17
- Pretty row 18
登录后复制
四、运行效果
博主刚开始学习，局部内容滚动这只是iScroll最基本的功能，接下来博主会尝试拉动刷新等功能。
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
Bootstrap中使用WebUploader步骤详解
js验证出生日期正则表达式
以上就是iScroll实现内容滚动步骤详解（附代码）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2764635.html
