iScroll 5 库集成后完全没有滚动答案

【问题标题】：No scrolling at all after iScroll 5 library integrationiScroll 5 库集成后完全没有滚动
【发布时间】：2014-07-17 03:23:33
【问题描述】：

我在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 jquery css iscroll

【解决方案1】：

问题

我怀疑原因是这里的 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()
 })

【讨论】：

我实际上必须查一下这个，因为我以前没有问过问题。但是向上三角形表示赞成。灰色复选标记以接受答案。来自meta.stackexchange.com/a/5235
好的接受了，实际上它告诉我我需要更多的声望点来提升，但无论如何我现在把你的解决方案放在bit.co.in :) 我现在唯一的问题是锚标签不不再在移动设备上工作。基本上点击链接不会带我去任何地方。
嗯...查看源代码，我没有看到任何危险信号。在 android 设备上，链接似乎有效，我没有方便的 iOS 和 windows phone 8 设备来检查这些。对不起。
我想我明白了。我从 myScroll = new IScroll('#wrapper'); 更改了 myScroll 声明进入 myScroll = new IScroll('#wrapper', { click: true });