前端开发（10）
1.在iscroll4的滚动容器范围内，点击input框、select等表单元素时没有响应
这个问题原因在于iscroll需要一直监听用户的touch操作，以便灵敏的做出对应效果，所以它把其余的默认事件屏蔽了，解决的方法是，在iscroll4源码里面找到这一行，
&&& 这样只要你touch的元素是>
&&& &has3d = false
和在配置iscroll时，useTransition设置成false就可以了（useTransition默认是false的）。
&&& 这样做有一点瑕疵就是滚动起来和原来比没那么流畅了（原来的效果真的是可以媲美原生app的），但是假如你不对比的话，是看不出来了。
&&& 在效果和体验上面选择，我更看重体验。
&&& 不过如果你符合下面的条件，我还是不建议你修改成我这样：
&&&&&&& 1)即使你不修改，无论你怎么往iscroll容器里面插内容，它都不会闪动，这种情况大多出现在纯文字的列表。假如列表涉及复杂的布局和图片，很多时候会出现闪动bug
&&&&&&& 2)如果你的web app只是单纯在手机浏览器浏览。translate3d 和 TransitionTimingFunction只是在IOS里的uiwebview支持不成熟，但是在手机上的safari完全没有问题，所以如果你不是用phonegap之类的框架开发混合app，你不需要担心这个问题。
&&&&&&& 3)只针对android，因为android的webkit暂时还不支持translate3d，iscroll会自动选择不用。
3.过长的滚动内容，导致卡顿和app直接闪退
&&& 说白了iscroll都是用js+css3实现的，对浏览器的消耗肯定是可观的，避免无限制的内容加载本身就是web产品应该避免的。
&&& 假如无可避免，我们可以尽量减低iscroll对浏览器内存的消耗
&&&&&&& 1)不要使用checkDOMChanges。虽然checkDOMChanges很方便，定时检测容器长度是否变化来refresh，但这也意味着你要消耗一个Interval的内存空间
&&&&&&& 2)隐藏iscroll滚动条，配置时设置hScrollbar和vScrollbar为false。
&&&&&&& 3)不得已的情况下，去掉各种效果，momentum、useTransform、useTransition都设置为false
4.左右滚动时，不能正确响应正文上下拉动
&&& 在做这种效果时 ，假如这个幻灯片模块只是你页面的一部分，你还需要上下拉动页面去浏览其它内容时，你的手指在这个模块上做上下拨动时，恐怕会没有反应。原因还是和问题1一样的，因为屏蔽了默认事件。
&&& 完美的解决方法是没有的，如果把 e.preventDefault() 去掉，幻灯片的滚动效果就会大打折扣，而且有时用户上下拨动的操作会被误操作成幻灯片的滚动。所以在效果还是体验上，大家还是自己选择吧。在技术上解决不了的问题，我认为还是多和产品和UI沟通比较好，共同协商一个良好的方案。
&&& 基本的心得就是这些拉，希望对大家有帮助。（转）
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：8148次
排名：千里之外
原创：10篇
(1)(1)(1)(6)(1)(5)(2)iScroll基本信息
iScroll基本信息
官网：http://cubiq.org/iscroll-4
版本：v4.2.5
兼容：iPhone/Ipod touch &=3.1.1, iPad &=3.2, Android
&=1.6, Desktop Webkit, Firefox, Opera desktop/mobile.
iScroll的历史
之所以iscroll会诞生，主要是因为无论是在iphone、ipod、android
或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容。
这个不幸的规则导致所有web-app要模拟成app的样子时，只能由一个绝对定位的header
或是footer再加上一个可以内容的滚动的中间区域组成。
幸运的是移动webkit提供了一种强大的硬件加速的CSS属性，这个属性可以用来模拟这个缺失的功能，Iscroll从这里开始了前进之路，但是没有不带刺的玫瑰。让内容滚动像原生方式一般比想象中要难
Tigs：截至2013年，IOS5 添加如下样式 overflow:
-webkit-overflow-scrolling: 已经能够支持区域滚动了。但是andriod4
还是不行...
iScroll 4 新特性
iScroll 4 这个版本完全重写了iScroll 3这个框架的原始代码，除了以前版本的iScroll特性以外，iScroll
4 还包括如下的特性：
速度和性能提升
精确捕捉元素
自定义滚动条
在此文档中你会发现很多例子来教会你如何快速上手iScroll脚本库。参看文中的demo小例子并仔细阅读此文档，可能有点小无聊，但是这篇文章中却是iScroll这个脚本库的精髓之所在哦。
iScroll需要对所要进行滚动的元素进行初始化，并且不限定一个页面中使用iScroll的元素的个数（这里不考虑您的硬件配置）。滚动元素中内容的类型和长度在一定程度上将会影响iScroll脚本库里可以同时使用的元素的个数。
使用iScroll这个脚本库时，DOM树的结构要足够简单，移除不必要的标签，尽量避免过多的标签嵌套使用。
最优的使用iScroll的结构如下所示：
& div id="wrapper"&
& li&& /li&
在这个小例子中，ul标签将会被滚动。iScroll一定要与滚动内容外面的wrapper进行联系才会产生效果。
只有wrapper里的第一个子元素才可以滚动，如果你想要更多的元素可以滚动，那么你可以试试下面的这种写法：
& div id="wrapper"&
& div id="scroller"&&
& li&& /li&
& li&& /li&
在这个例子中，scroller这个元素可以滚动，即便它包含两个ul元素
实例化iScroll
iScroll必须在调用之前实例化，你可以在下面几种情况下对iScroll进行实例化：
onDOMContentLoaded
以内联inline方式
ONDOMContentLoaded
适用于滚动内容只包含文字、图片，并且所有的图片都有固定的尺寸
使用方法：（在head标签中添加如下代码）
& script src="iscroll.js"&& /script&
&& script&&
function loaded(){
myscroll=new iScroll("wrapper");
window.addEventListener("DOMContentLoaded",loaded,false);
&& /script&
注意：&myscroll这个变量是全局的，因此你可以在任何地方调用它的函数
有些时候在DOMContentLoaded的状态下就初始化iScroll其实是有点草率的，因此此时页面的资源可能还没有全部加载完毕。如果你遇到了一些很怪异的行为可以试试下面的写法：
& script src="iscroll.js"&&
&& script&
function loaded(){
setTimeout(function(){
myscroll=new iScroll("wrapper");
window.addEventListener("load",loaded,false);
& /script&
这种情况下iScroll会在页面资源（包括图片）加载完毕100ms之后得到初始化，这应该是一种比较安全的调用iScroll的方式。
inline初始化
这种情况会在页面加载到js的时候就进行调用，此方法不推荐使用，但是很多javascript的大牛都在用这种方式，我又
有什么理由不赞成呢？
& script src="iscroll.js"&& /script&
&& div id="wrapper"&
& li&& /li&
&& script&
var myscroll=new iScroll("wrapper");
& /script&
不过建议你使用一些框架的ready方法来安全调用iScroll（比如jquery里的ready()）。
iScroll 参数
iScroll里的第一个参数很简单就是外容器的id，或者css语法格式的class，如'.home .scroll'。
第二个参数允许你自定义一些属性配置和方法，比如下面的这段代码：
var myscroll=new iScroll("wrapper",{hScrollbar:false, vScrollbar:false});
& /script&
第二个参数通常都是一个对象，像上面的这个例子里就设定了不显示滚动条。所有参数如下（*号为常见参数）：
是否允许水平滚动
false&否&true&是
是否允许垂直滚动
false&否&true&是
是否超过实际位置反弹
false&否&true&是
bounceLock
当内容少于滚动是否可以反弹
false&否&true&是
momentum&*
是否开启拖动惯性
false&否&true&是
lockDirection
当水平或垂直拖动时是否锁定另一边的拖动
false&否&true&是
useTransform
是否使用CSS变形
false&否&true&是
useTransition
是否使用CSS变换
false&否&true&是
checkDOMChanges
是否自动检测内容变化
false&否&true&是
已经滚动的基准值(一般用在拖动刷新)
滚动水平初始位置（负值）
滚动垂直初始位置（负值）
Scrollbar 的相关参数
hScrollbar&*
是否显示水平滚动条
false&否true&是
vScrollbar&*
是否显示垂直滚动条
false&否true&是
fixedScrollbar
在iOS系统上，当元素拖动超出了
scroller的边界时，滚动条会收缩，
设置为true可以禁止滚动条
超出scroller的可见区域。
false&否true&是
默认在Android上为true，
&iOS上为false
hideScrollbar
是否隐藏滚动条
false&否true&是
默认在Android上为false，
&iOS上为true
fadeScrollbar
滚动条是否渐隐渐显
false&否true&是
默认在Android上为false，
&iOS上为true
scrollbarClass*
字定义滚动条的样式名
自定义class
Zoom 放大相关的参数
false&否&true&是
放大的最小倍数
放大的最大倍数
doubleTapZoom
双击放大倍数
wheelAction
鼠标滚动行为（还可以是zoom）
none&不支持&'scroll'&
鼠标滚动&'zoom'&鼠标缩放
snap 捕捉元素相关的参数
是否开启捕捉元素，snap值可以为true 或是
&DOM元素的tagname，当为true 时，捕捉的元素
会根据可滚动的位置和滚动区域计算得到可滑动几页。
如果为tagname,则滑动会对齐到捕捉的元素上。
false&否&true是&&DOM元素的tagname
snapThreshold
滑动的长度限制，只有大于这个距离才会触发捕
捉元素事件
自定义 Events 的相关参数
onBeforeScrollStart
开始滚动前的事件回调
默认是阻止浏览器默认行为
null&不设置&
Function&自定义函数
function (e) { e.preventDefault(); }
refresh 的回调
onScrollStart
开始滚动的回调
onBeforeScrollMove
在内容移动前的回调
onScrollMove
内容移动的回调
onBeforeScrollEnd
在滚动结束前的回调
onScrollEnd
在滚动完成后的回调
onTouchEnd
手离开屏幕后的回调
销毁实例的回调
onZoomStart
放大开始时的回调
放大的回调
放大结束后的回调
iScroll 方法API
销毁你实例化的iScroll 实例，包括之前绑定的所有iscroll 事件。
这个方法非常有用，当你的滚动区域的内容发生改变 或是 滚动区域不正确，都用通过调用refresh 来使得iscroll
重新计算滚动的区域，包括滚动条，来使得iscroll 适合当前的dom。
这个方法接受4个参数 x, y, time, relative x 为移动的x轴坐标，y为移动的y轴坐标,
time为移动时间，relative表示是否相对当前位置。
scrollToElement
这个方法实际上是对scrollTo的进一步封装，接受两个参数(el,time)，el为需要滚动到的元素引用，time为滚动时间。
scrollToPage
此方法接受三个参数(pageX,pageY,time) 当滚动内容的高宽大于滚动范围时，iscroll
会自动分页，然后就能使用scrollToPage方法滚动到页面。当然，当hscroll 为false
的时候，不能左右滚动。pageX这个参数就失去效果
调用这个方法会立即停止动画滚动，并且把滚动位置还原成0，取消绑定touchmove,
touchend、touchcancel事件。
调用这个方法，使得iscroll恢复默认正常状态
立即停止动画
改变内容的大小倍数,此方法接受4个参数，x,y,scale,time
分别表示的意思为，放大的基准坐标，以及放大倍数，动画时间
当iscroll 没有处于正在滚动，没有移动过，没有改变大小时，此值为true
自从Twitter和一些Apple的本地化应用出现了这个效果之后，这个效果就变得非常流行，你可以看看视频先一睹为快，也可以试试拉动刷新是如何工作的。
通过&topOffset&参数属性设置iScroll已经滚动的基准值；
通过&onScrollMove&参数方法判断当前滚动是到顶端还是底端；
通过&onScrollEnd&参数方法触发加载新数据，再通过&refresh&方法重新渲染界面；
通过&onRefresh&参数方法调整刷新后的界面结构；
var myScroll =new iScroll("wrapper",{
topOffset: 50,
onRefresh: function(){...},
onScrollMove: function(){...},
onScrollEnd: function()...{}
& /script&
具体的实现代码可以查看的源文件；
我们不得不面对一个事实，那就是光有滚动其实没什么新意的。这就是为什么在iScroll 4这个版本里我们允许你可以放
大和缩小。想要这个功能，只需要设置放大的参数zoom 为true即可实现利用手势来放大和缩小。你可以看看这儿。
双击放大和缩小的功能在iScroll 4里也是得到支持的。要使用缩放功能，你至少需要如下配置：
var myScroll =new iScroll("wrapper",{zoom:true});
& /script&
如果你想对缩放功能进行深度的自定义的话可以使用下面的一些选项：
指定允许放大的最大倍数，默认为4
【注意事项】：&如果想要图片缩放的效果很好的话要把他们放到硬件的合成层中。通俗点说，就是在所有需要缩放的img元素上使用-webkit-transform:translate3d(0,0,0)来实现，而且尤为重要的是，硬件的加速会占用大量资源，要谨慎使用，否则你的应用可能就此崩溃。
捕捉的功能会促使scroller去重新定义位置，这样可以制作更加花哨的传送带效果。有个小例子。
默认情况下，iScroll将scroller分成四分体，或者是相同大小的wrapper。iScroll
4加入了这个属性允许捕捉scroller里的任何元素，不考虑外部wrapper的大小。如果你想要实现这样的传送带效果，我建议你使用“quadrant”分割。最佳的设置如下：
var myscroll=new iScroll("wrapper",{
snap:true,
momentum:false,
hScrollbar:false,
vScrollbar: false
& /script&
捕获元素，可以通过传递一个字符串来作为查询条件，如下：
var myscroll=new iScroll("wrapper",{
snap:"li",
momentum:false,
hScrollbar:false,
vScrollbar: false
& /script&
在这个例子中scroller可以捕捉到滚动区域中最左上角的li元素
自定义滚动条
在iScroll 4这个版本中，可以利用一系列的css来自定义滚动条的呈现。可以给滚动条添加一个class参数，如下：
你可以看一个小例子，在这个小例子里，myScrollbarH这个类被添加到了水平滚动条上，myScrollbarV这个类则被添加给了垂直方向上的滚动条上了。需要提醒的是，滚动条是由两个元素组合而成的：容器和显示器。容器同wrapper的高度相同，而显示器则代表的是滚动条本身。
滚动条的HTML结构如下：
.myscrollbarV{
position:z-index:100;width:8bottom:7top:2right:1
.myScrollbarV & div {
z-index:100;
width:100%;
background:-webkit-gradient(linear, 0 0, 100% 0, from(#f00), to(#900));
border:1px solid #800;
-webkit-background-clip:padding-
-webkit-box-sizing:border-
-webkit-border-radius:4
-webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。iScroll首页、文档和下载 - 手机Webkit上的元素滚动处理 - 开源中国社区
当前访客身份：游客 [
当前位置：
iScroll 的诞生是因为手机 Webkit 浏览器（iPhone、iPod、Android 和 Pre）本身没有为固定宽度和高度的元素提供滚动内容的方法。这导致了很多网页使用 position:absolute 无法固定页头页尾，并对内容进行滚动的方式。
而 iScroll 就是为了解决这个问题。
iScroll最新更新资讯，共1条&&()
5评/3115阅
授权协议：
开发语言：
操作系统：&Windows Phone/Mobile&
收录时间：
舒巧 发表于4个月前
一切勇归来 发表于5个月前
，最后回答(5个月前)：
wmymtx 发表于6个月前
放荡_蜗牛 发表于6个月前
lociver 发表于7个月前
，最后回答(6个月前)：
aaaaaaash 发表于7个月前
EnoND 发表于2年前
，最后回答(7个月前)：
尤天翔 发表于3年前
，最后回答(10个月前)：
sky_le 发表于2年前
，最后回答(1年前)：
crazymus 发表于1年前
，最后回答(1年前)：
prince_happy 发表于2年前
，最后回答(2年前)：
红有三Evan 发表于2年前
，最后回答(2年前)：
java思想 发表于2年前
，最后回答(2年前)：
jamehery 发表于2年前
，最后回答(2年前)：
小七189 发表于3年前
，最后回答(2年前)：
万昆1 发表于3年前
yuanmingxiang 发表于4年前
，最后回答(3年前)：
sky止殇 发表于3年前
，最后回答(3年前)：
小布丁点 发表于3年前
，最后回答(3年前)：
进击的程序员 发表于3年前
，最后回答(3年前)：
使用 iScroll 中的任何问题
共有 118 个类似软件
jQuery Mobile（jQueryMobile） 是 jQuery 在手机上和平板设备上的版本。jQuery Mo...
Sencha Touch是专门为移动设备开发应用的Javascript框架。通过Sencha Touch你可以创...
jQ.Mobi是jQuery的部分重写版本，但针对HTML5和移动设备做了优化。它的文件大小只有...
Mobello 是一个高性能的 JavaScript 框架用于构建基于 HTML5 的移动应用。你可以构...
Junior 是一个前端的框架，用来构建 HTML5 的移动 Web 应用，外观跟原生应用一致，...
App.js 是一个轻量级的 JavaScript UI 库，用来创建移动的 Web 应用，应用的外观跟...
Clouda是基于node.js的Webapp开发框架，在使用Clouda时需要安装node.js和MongoDB。...
Frozen UI是一个开源的简单易用，轻量快捷的移动端UI框架。基于手Q样式规范，选取最...
app-UI 是一个免费开源的可重用 UI 组件容器的集合，对开发移动的 Web 应用非常有用...
mobl 是一个新的开源的编程语言，主要用于加速手机应用的开发，mobl 可方便构建手机...
IScroll 可以分离 IScroll 核心，解决文本框问题，加入步长属性
共有 50 人关注 iScroll使用iScroll时，input等不能输入内容的解决方法-javascript-电脑编程网使用iScroll时，input等不能输入内容的解决方法作者：%e7%bf%bb%e8%b6%8a%e8%bf%99%e5%a2%99　和相关&&　　　　最近做移动平台的应用，使用iscroll使屏幕上下滑动。发现当使用iscroll后，input等不能输入内容了。只要在iscroll.js文件中加入如下代码就ok了。
function allowFormsInIscroll(){
[].slice.call(document.querySelectorAll('input, select, button')).forEach(function(el){
el.addEventListener(('ontouchstart' in window)?'touchstart':'mousedown', function(e){
e.stopPropagation();
document.addEventListener('DOMContentLoaded', allowFormsInIscroll, false);
&相关资料：｜｜｜｜｜｜｜使用iScroll时，input等不能输入内容的解决方法来源网络，如有侵权请告知，即处理！编程Tags：　　　　　　　　　　　　　　　　&　　　　　　　　　　　　　　　　　　　　}