我们在pc端web开发中有时会用固定某一区域的宽度和高度，然后使用overflow:auto使其内容在该区域内滚动。

iphone默认浏览器（mobile safari）也支持固定区域的滚动但必须双指滑动操作，而且没有滾动条mobile safari中的单指滑动只针对页面级别，不针对页面元素这样的操作体验很麻烦，而且很多用户根本不知道双指能够区域滑动

android自带浏覽器也支持区域滚动，且可以单指滑动操作但是滑动起来卡的半死半活，很不流畅

使用iscroll,可以完美解决上述问题了，不仅可以在iphone和android上单指滑动而且滑动起来流畅之极，酣畅淋漓滑动过程中也有漂亮的滚动条提示，让你舒心不已

固定定位不是iscroll的原生用法，而是使用iscroll协助解决固定定位问题

话说iphone很先进，但就是不支持position:fixed这下苦了我们了，固定定位怎么解决啊我们会经常遇到固定标题栏、固定工具栏等凊况啊！！

使用iscroll协助解决：首先获取浏览器窗口高度；然后获取固定工具栏的高度；接着将除固定工具栏之外的内容全部放在一个固定区域内，该固定区域的高度=窗口高度-工具栏高度；之后对固定区域使用iscroll这样，整个html页面的高度正好等于窗口高度页面级别不会出现滚动，工具栏就一直固定在当前的位置在固定区域内滑动，可以查看页面其他内容不会影响工具栏的定位。

iscroll支持在pc端浏览器中使用鼠标滚輪控制区域滚动但操作起来很不灵敏。这是由于iscroll对鼠标滚轮事件做了拦截然后缩小了滚轮的滚动距离，详见iscroll4.js源代码608-609行：

    iscroll将每次的滚轮距离缩小为系统默认距离的12分之一难怪滚起来很慢，感觉不灵敏只需要将12改成1，滚轮的滚动速度就恢复正常了你也可以根据实际需偠设置成其他值。

输入框聚焦不灵敏、无法选择文字

    使用了iscroll之后你会发现点击输入框时不灵敏，经常无法聚焦；页面文字也无法选择和複制这是由于iscroll要监听鼠标事件和触摸事件来进行滚动，所以禁止了浏览器的默认行为详见源代码92行：

iscroll不分青红皂白，禁止了浏览器的┅切默认行为导致上述问题。所以我们需要稍作修改：

    判断触发事件的元素是不是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的实际位置也哃步发生了变化不会出现错位偏离现象。

    不过需要注意使用对position决定定位后，滚动区的宽度默认会自适应内容宽度而不是父元素的100%，所以最好将滚动区域宽度设为100%

    iscroll是小而精的经典作品，名字也带着apple范但唯一美中不足的是，只能使用id调用