在isroll5库集成后，完全没有滚动

No scrolling at all after iScroll 5 library integration

本文关键字：滚动 isroll5 集成      更新时间：2023-09-26

我在http://dev.bit.co.in上添加了isroll库

我已经设置了最小值。整个正文内容由

封装。
<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);
}
}

这些是isscroll推荐的基本更改。

现在，当我在移动设备上打开它时，它似乎根本不滚动不幸的是。

如果你有什么想法，让我知道。:)

问题

我怀疑原因是这里的javascript代码:

window.onload = function(){
    var text_input = document.getElementById ('shortname-lookup');
    text_input.focus ();
    text_input.select ();
}

覆盖onload="loaded()"。.onload是传统的事件注册，在这种情况下，只能使用此方法将一个函数附加到此处理程序，并且似乎它还覆盖内联事件。作为演示，我用以下代码创建了一个简单的页面

<body onload="alert('onload')">
<script>
window.onload=function(){
   alert('denied')
}              
</script>

应该只有一个带有"denied"的警告。(虽然在测试中，有时会出现onload。但只有onload)

解决方案

使用.addEventLister/attachEvent要么加载isroll或聚焦你的文本。就像

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()
 })
相关文章：