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

Scrolling Very Jumpy On Smaller Devices

本文关键字：滚动 非常 跳跃      更新时间：2023-09-26

我知道整个background-attachment: fixed很无聊，已经被问过很多次了-但我迫切需要一些帮助。我已经写了三个月的代码，正在为一个朋友设计一些东西，我最终会把它添加到我的作品集中。链接到网站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');
});

由于事件触发时间的不同，一些浏览器在呈现滚动动作时可能会遇到困难。有些移动设备直到整个动作完成后才会真正激活你的滚动，而有些移动设备可能会尝试连续地激活它，从而创造出一种快速、不和谐的类型感觉。一种避免这种情况的流行方法是在计时器内设置滚动的任何功能/动作。

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);
});

在这里可以看到，每次滚动触发时，都会启动对计时器的检查。如果计时器已经设置为off，它将清除它。之后，直接设置一个新的计时器。

注意:我建议至少在你的background-image调用和background-position调用上放一个过渡调用。

相关文章：