javascript - 为什么 iOS 的滚动事件不能使元素可见？

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 屏幕，颜色就会改变。这是什么原因？为什么有的 Action 可以做，有的不能做？我不明白为什么元素的淡入不遵循显示的示例 here.

Answer 1

iOS 在滚动时暂停 javacript。使用那里的浏览器，您只能在滚动事件之前和之后做一些事情。

我想用这个链接来支持我的回答。 W3 Schools

这是一个替代解决方案。

Iscroll Probe

更新

脚本

    $( 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() { }); 添加到您已有的函数中。