我在 http://dev.bit.co.in 上添加了 iScroll 库
我已经设置了最低限度。整个主体内容被封装
<div id="wrapper">
<div id="scroller">
...
</div>
</div>
在头部我放了这个:
<script type="text/javascript" src="/themes/bit.co.in/js/iscroll-master/build/iscroll.js"></script>
<script type="text/javascript">
var myScroll;
function loaded () {
myScroll = new IScroll('#wrapper');
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
</script>
此外，我在 body 标签中添加了 onload="loaded()"并在 CSS 中添加了以下内容:
@media (max-width: 430px) {
body {
/* On modern browsers, prevent the whole page to bounce */
overflow: hidden;
}
#wrapper {
position: relative;
width: 300px;
height: 300px;
overflow: hidden;
/* Prevent native touch events on Windows */
-ms-touch-action: none;
/* Prevent the callout on tap-hold and text selection */
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* Prevent text resize on orientation change, useful for web-apps */
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
}
#scroller {
position: absolute;
/* Prevent elements to be highlighted on tap */
-webkit-tap-highlight-color: rgba(0,0,0,0);
/* Put the scroller into the HW Compositing layer right from the start */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
}
这些是 iscroll 推荐的准系统更改。
现在，当我在移动设备中将其拉起时，它似乎根本没有滚动 不幸的是。
如果你有任何想法，请告诉我。 :)
最佳答案
问题
我怀疑原因是这里的 javascript 代码:
window.onload = function(){
var text_input = document.getElementById ('shortname-lookup');
text_input.focus ();
text_input.select ();
}
它覆盖了 onload="loaded()"。 .onload 是一个 traditional event registration在这种情况下，只能使用此方法将一个函数附加到此处理程序，而且它似乎也会覆盖 inline events .作为演示，我做了 simple page编写这些代码
<body onload="alert('onload')">
<script>
window.onload=function(){
alert('denied')
}
</script>
应该只有一个带有“拒绝”的警报。 (虽然测试了，但有时会出现onload。但只是onload)
解决方案
使用.addEventLister/attachEvent用于加载 iScroll 或聚焦文本。有点像
window.addEventListener("load",function(){
var text_input = document.getElementById ('shortname-lookup');
text_input.focus ();
text_input.select ();
});
或者因为你正在使用 jquery
$(function(){ //shortcut for onload
$("#shortname-lookup").select().focus()
})
关于javascript - iScroll 5 库集成后完全没有滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23902550/