Question

我知道整个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');
});

Answer 1

由于事件触发时的差异，某些浏览器可能难以渲染滚动操作。有些移动设备实际上不会激活你的滚动，直到整个动作完成，而其他移动设备可能会尝试连续触发它并创建一个活泼，刺耳的类型感觉。避免这种情况的一种流行方法是在计时器内滚动时设置所需的任何功能/动作。

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

在这里，您可以看到每次滚动时都会启动，会启动对计时器的检查。如果计时器已经设置为关闭，则清除它。然后直接设置一个新的计时器。

注意：我建议至少在您的背景图片调用和可能的背景位置上设置过渡调用。

在较小的设备上滚动非常有弹性

1 个答案: