移动端scroll事件延迟怎么解决_Html5_论坛

移动端scroll事件延迟怎么解决

黄***o 分类：Html5 人气：880 回帖：2 发布于6年前收藏

移动端在监听scroll时候总是会出现延迟，例如在页面滚动到一定位置后给某个div添加类名，但是在移动端中总是在页面停止滚动后才会触发onscroll事件，请问这个怎么解决？

标签：css html5 javascript

讨论这个帖子（2）垃圾回帖将一律封号处理……

Lv3 码奴

gu***di 软件测试工程师 6年前#1

1、这个问题有不少人遇到，SegmentFault搜索：微信 scroll、百度搜索：微信 scroll，原生的浏览器就支持。

2、查阅了几十个相关网页，找了一个页面在微信上滑动时要手指松开才会触发scroll事件怎么办的代码，测试确实可用，没看明白怎么实现的。

3、坐等大神解答。

估计你的代码有问题，实测（iPhone+Android）滚动中也可以触发。

问题中提到，给div添加类名，滚动停止才触发。
demo的代码修改为给dom添加类名。

重新调整代码。
滚动中，如果滚动到当前位置，当前位置的元素背景变为淡红色。

可以测试下，http://www.shuodahua.com/othe...
已经安卓(MX4一加1) + iPhone(iPhone6iPhone6P) 真机测试。

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"/>
<style>
body{
    margin:0;
}
nav{
    position:fixed;
    top:200px;
    left:30%;
    right:30%;
    z-index:999;
}
nav textarea{
    width:100%;
    background:#EEE;
}
div{
    margin:0;
    background:#FFE;
    height:30px;
    text-align:center;
    font-size:8px;
    color:#CCC;
}
div:after{
    content:'还没到我这里,我没有变色';
    position:absolute;
    line-height:30px;
}
div.active{
    background:#FEE;
    color:#C99;
}
div.active:after{
    content:'已经到达我这里了,我为红色';
    position:absolute;
    line-height:30px;
}
</style>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, maximum-scale=1.0, minimal-ui">
</head>
<body>
<nav>
  <textarea id="result"></textarea>
</nav>
<script>
var divTop = [];
var divCount = 500;
for( var i = 0 ; i < divCount ; i++ ){
    document.writeln('<div id="dom_' + i + '"></div>');
    divTop.push({
        dom : document.getElementById('dom_' + i),
        top : document.getElementById('dom_' + i).offsetTop,
        active : false
    });
}
document.onscroll = function(){
    var top = document.body.scrollTop;
    document.getElementById('result').value = top;
    top += 200;
    for( var i = 0 ; i < divCount ; i++ ){
        if ( divTop[i].top < top ){
            if( divTop[i].active == false ){
                divTop[i].active = true;
                divTop[i].dom.className = "active";
            }
        } else {
            if( divTop[i].active == true ){
                divTop[i].active = false;
                divTop[i].dom.className = "";
            }
        }
    }
}
</script>
</body>
</html>

Lv6 码匠

de***oo 页面重构设计 6年前#2

ios的webview在弹性滚动的时候会阻止事件响应和Dom改变带来的页面渲染变化。
要解决的话用iScroll.js或者自己实现滚动

文明上网，理性发言！ 😉 阿里云幸运券，戳我领取