Question

我正在尝试滚动事件，并决定在scrollTop（）超过50后尝试使其淡入div。这是我的代码：

 $(window).scroll(function() {

    if ($(this).scrollTop() >= 50) {    
        $('#div').css('visibility', 'visible');
    } 
}

我也试过这个：

$(window).scroll(function() {

        if ($(this).scrollTop() >= 50) {    
            $('#div').css('display', 'initial');
        } 
}

这些都可以在计算机上正常工作，但在我的手机上，只有在我放开屏幕后才显示div。我认为这适用于iOS上的所有javascript函数，但是我通过尝试这个来测试它（在这个例子中div从一开始就可见）：

 $(window).scroll(function() {

            if ($(this).scrollTop() >= 50) {    
                $('#div').css('background-color', 'red');
            } 
            else{
                $('#div').css('background-color', 'green');

               }
    }

令人惊讶的是，一切正常。我可以上下滚动，不要放开我的iPhone的屏幕，颜色会改变。这是什么原因？为什么可以采取某些行动，而其他行动则不然？我不明白为什么元素的淡入不遵循here.

所示的例子

Answer 1

iOS在滚动时暂停javacript。使用浏览器，您只能在滚动事件之前和之后执行操作。

我想通过此链接支持我的回答。 W3 Schools

这是另一种解决方案。

Iscroll Probe

更新

SCRIPT

    $( document ).ready(function() {


$(window).scroll(function (event) {



    var scroll = $(window).scrollTop();
    document.getElementById('output').innerHTML = scroll;


}); 

        });

HTML

 <div style="z-index: 1000; position:fixed;width:100px;height:100px;color:red;top:100px;left:100px; " class="output" id="output"></div>

这在我的iPhone 6上工作正常。脚本在滚动时更新。因此，我相信您的问题的答案是将$( document ).ready(function() { });添加到您已有的功能中。

为什么iOS的scroll事件不能使元素可见？

1 个答案: