javascript - 在较小的设备上滚动非常跳跃

Question

我知道整个 background-attachment: fixed 很无聊，而且已经被问过很多次了——但我迫切需要一些帮助。我已经编码三个月了，正在为一个 friend 设计一些东西，我最终会把它添加到我的作品集中。网站链接 lengtest.com .

所以我设法找到代码来解决移动设备上没有固定的问题，但现在它不会滚动而不会延迟。谁能帮忙？或者我应该设计一个新页面。我的桌面网站很好。只有正在播放的手机和 ipad。

CSS:

#container {
    display: inline-block;
    background-image:url("lengcover2.jpg");
    background-attachment:scroll;
    background position:left top;
    background-size:cover;
    width:100%;
    height:800px;
}

JavaScript(使用 jQuery):

$(window).scroll(function() {
   var scrolledY = $(window).scrollTop();
   $('#container').css('background-position', 'left ' + ((scrolledY)) + 'px');
});

Answer 1

由于事件触发时间的差异，某些浏览器可能难以呈现滚动 Action 。有些移动设备在整个操作完成之前不会真正激活您的滚动条，而其他移动设备可能会尝试连续触发它并营造一种活泼、刺耳的感觉。避免这种情况的一种流行方法是在计时器内的滚动条上设置您想要的任何功能/操作。

var timer;
$(window).scroll(function() {
    if(timer) {
        window.clearTimeout(timer);
    }

    timer = window.setTimeout(function() {`
        var scrolledY = $(window).scrollTop();
        $('#container').css('background-position', 'left ' + ((scrolledY)) + 'px');
    }, 100);
});

在这里您可以看到，每次触发滚动时，都会启动对计时器的检查。如果计时器已设置为关闭，则将其清除。紧接着，一个新的计时器被设置。

注意:我建议至少在您的背景图片调用和可能的背景位置上调用转换。