参考 http://hi.baidu.com/xiaowuphp/blog/item/8ca07e000e6cbc94d43f7cc2.html
iscroll是什么?
iscroll.js是Matteo Spinelli开发的一个js文件,使用原生js编写,不依赖与任何js框架。旨在解决移动webkit系浏览器的区域滚动问题,兼容mobile safari、android默认浏览器、safari、chrome、firefox5+、opera11+、IE9+及其他webkit核心浏览器。最新版本为iscroll4。
官方网站:iscroll4
iscroll的用武之地
1.区域滚动
我们在pc端web开发中,有时会用固定某一区域的宽度和高度,然后使用overflow:auto,使其内容在该区域内滚动。
iphone默认浏览器(mobile safari)也支持固定区域的滚动,但必须双指滑动操作,而且没有滚动条。mobile safari中的单指滑动只针对页面级别,不针对页面元素。这样的操作体验很麻烦,而且很多用户根本不知道双指能够区域滑动。
android自带浏览器也支持区域滚动,且可以单指滑动操作,但是滑动起来卡的半死半活,很不流畅。
使用iscroll,可以完美解决上述问题了,不仅可以在iphone和android上单指滑动,而且滑动起来流畅之极,酣畅淋漓。滑动过程中也有漂亮的滚动条提示,让你舒心不已。
2.固定定位
固定定位不是iscroll的原生用法,而是使用iscroll协助解决固定定位问题。
话说iphone很先进,但就是不支持position:fixed。这下苦了我们了,固定定位怎么解决啊,我们会经常遇到固定标题栏、固定工具栏等情况啊!!
使用iscroll协助解决:首先获取浏览器窗口高度;然后获取固定工具栏的高度;接着将除固定工具栏之外的内容全部放在一个固定区域内,该固定区域的高度=窗口高度-工具栏高度;之后对固定区域使用iscroll。这样,整个html页面的高度正好等于窗口高度,页面级别不会出现滚动,工具栏就一直固定在当前的位置。在固定区域内滑动,可以查看页面其他内容,不会影响工具栏的定位。
鼠标滚轮滚动
iscroll支持在pc端浏览器中使用鼠标滚轮控制区域滚动,但操作起来很不灵敏。这是由于iscroll对鼠标滚轮事件做了拦截,然后缩小了滚轮的滚动距离,详见iscroll4.js源代码608-609行:
wheelDeltaX = e.wheelDeltaX / 12;//控制X轴鼠标滚轮速度
wheelDeltaY = e.wheelDeltaY / 12;//控制Y轴鼠标滚轮速度
iscroll将每次的滚轮距离缩小为系统默认距离的12分之一,难怪滚起来很慢,感觉不灵敏。只需要将12改成1,滚轮的滚动速度就恢复正常了。你也可以根据实际需要设置成其他值。
输入框聚焦不灵敏、无法选择文字
使用了iscroll之后,你会发现点击输入框时不灵敏,经常无法聚焦;页面文字也无法选择和复制。这是由于iscroll要监听鼠标事件和触摸事件来进行滚动,所以禁止了浏览器的默认行为,详见源代码92行:
onBeforeScrollStart: function (e) { e.preventDefault(); },
iscroll不分青红皂白,禁止了浏览器的一切默认行为,导致上述问题。所以我们需要稍作修改:
onBeforeScrollStart: function (e) {
var target = e.target;
while (target.nodeType != 1) target = target.parentNode;
if (target.tagName != ‘SELECT’ && target.tagName != ‘INPUT’ && target.tagName != ‘TEXTAREA’)
e.preventDefault();
},
判断触发事件的元素是不是input、select、textarea等表单输入类元素,如果不是就阻止默认行为。这样保证了输入类元素能正确快速聚焦。
在上述修改中追加一个条件 target.tagName != ‘body’或者直接将onBeforeScrollStart修改为null,即可做到鼠标选取文字,但这样的修改会导致iscroll滚动失效或不灵敏,所以无法选取文字这个问题先放一边吧。如你有更好的方法,欢迎回复。
select元素操作不灵敏或操作后白屏
使用iscroll后,还有一个较麻烦的问题,就是select元素点击不灵敏(滚动之后点击select,经常无响应);有时点击有反应了,下拉菜单显示却错位(pc端);选择一项之后,页面直接变成了空白(iphone、android中)或者页面位置向上偏离,滚动区域位置出现偏离。
说白了,就是导致select没法用。为此我调试了很久,最后发现了问题所在:iscroll默认使用的是css的transform变形中的translate3d实现区域滚动,每次滚动实际是改变translate3d中的y轴值,实际的dom位置并没有发生变化。translate3d会导致页面的焦点错误,系统级下拉菜单的显示则会导致其出现显示偏离。
控制滚动模式的代码在67行:useTransform: true。好在iscroll提供了另一种滚动方式,基于绝对定位位置变化的滚动。修改为useTransform: false之后,iscroll就会使用对定位位方式来实现滚动,该方式是我们在web开发中模拟动画的最常用方式,滚动之后dom的实际位置也同步发生了变化,不会出现错位偏离现象。
在pc端主流浏览器、iphone、android2.2下测试,select问题完美解决。
不过需要注意,使用对position决定定位后,滚动区的宽度默认会自适应内容宽度,而不是父元素的100%,所以最好将滚动区域宽度设为100%。
美中不足
iscroll是小而精的经典作品,名字也带着apple范。但唯一美中不足的是,只能使用id调用。
分享到:
相关推荐
这个版本比较不错,纯中文,介绍的比较详细开发够用了,很不错的一个滚动条插件。
iScroll是个很强大的插件,我也只是略懂皮毛,这里我们简单的介绍一下。 iScroll的产生: iScroll的产生完全是因为移动版webkit浏览器,例如在iPhone,Android 的移动设备上。 iScroll的使用方法: iScroll的原理是...
iScroll功能很强大,目前我只用来 自定义滚动条 以下简单介绍一下iscrol在移动端自定义滚动条时的使用和注意事项。 一、用法 iScroll对要滚动的元素进行初始化,且不限制一个页面中使用iScroll的元素个数。 使用...
主要为大家详细介绍了iscroll.js滚动加载实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
主要为大家详细介绍了iscroll动态加载数据的完美解决方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
以下这篇文章是iScroll.js官网的中文翻译,尽管自己英文不好,但觉得原作者们翻译的这个资料还是可以的,基本用法介绍清楚了。如果你英文比较好的话,可以看看官网的资料
是不是有点小小的‘鸡冻’ ,它就是由我们今天要介绍的主人公‘iscroll.js’实现的,接下来我以最最简便的方式教给大家~~ 实现步骤 一、准备好iscroll.js库 到官网下载即可: https://github.com/cubiq/iscroll 二...
主要为大家详细介绍了基于iScroll实现内容滚动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
主要介绍了vue中利用iscroll.js解决pc端滚动问题,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
iScroll 4 这个版本完全重写了iScroll这个框架的原始代码。这个项目的产生完全是因为移动版webkit浏览器(诸如iPhone,iPad,...下面这篇文章主要介绍了利用iscroll4实现轮播图效果的方法教程,需要的朋友可以参考下。
主要为大家详细介绍了iscroll-probe下拉刷新和下拉加载,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
主要为大家详细介绍了H5基于iScroll实现下拉刷新和上拉加载更多效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文主要介绍在HTML5中使用iScroll实现下拉刷新,上拉加载更多数据的方法,主要就是写了两个自定义函数pullDownAction和pullUpAction,分别在下拉和上拉的事件中调用他们。
本篇文章主要介绍了IScroll5实现下拉刷新上拉加载的功能实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
主要介绍了iscroll实现下拉刷新功能的相关代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文主要介绍iscroll插件在使用中,遇到select下拉框无法下拉刷新的处理方法,希望能帮到大家。
主要为大家详细介绍了基于iScroll实现下拉刷新和上滑加载效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
主要介绍了vue + any-touch实现一个iscroll实现拖拽和滑动动画效果,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下