gpt4 book ai didi

javascript - iScroll 5 库集成后完全没有滚动

转载 作者:行者123 更新时间:2023-11-28 10:22:41 30 4
gpt4 key购买 nike

我在 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/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com