javascript - 如何消除人为固定元素滚动时的闪烁？

Question

这是一个非常简单的例子，将一个元素粘贴到另一个元素的可见区域的顶部。当 .container 滚动时，.fixed 停留在顶部。

<div class="container">
    <div class="fixed">fixed content</div>
    <div class="content">regular content<br/>regular content<br/>regular content<br/>regular content<br/>regular content</div>
</div>

<style type="text/css">
.container {
    position: relative;
    border: 1px solid blue;
    overflow: auto;
    width: 250px;
    height: 250px;
}
.content {
    height: 500px;
    width: 500px;
}
.fixed {
    position: absolute;
    width: 500px;
    margin-top: 2rem;
    border 1px solid red;
}
</style>

<script type="text/javascript">
    $('.container').scroll(function () {
        var top = $('.container').prop('scrollTop');
        console.log(top);
        $('.fixed').css('top', top);
    });
</script>

问题是如果浏览器不够快，当我滚动时 .fixed 元素会闪烁。它滞后于滚动(滚动时将 .fixed 中的文本位置与 .content 中的文本进行比较)。在我的桌面上它运行完美，但是当我尝试在虚拟机的 Chromium 中运行它时，我可以看到闪烁。

有没有其他方法可以在浏览器呈现页面之前捕获滚动事件并设置我的 .fixed 元素的位置？

编辑 更新示例以包含水平滚动。固定元素只能垂直固定。

Answer 1

使用双层容器:

<div class="container-wrapper">
    <div class="fixed">fixed content</div>
    <div class="container">
        <div class="content">regular content<br/>regular content<br/>regular content<br/>regular content<br/>regular content</div>
    </div>
</div>

使用 CSS:

.container-wrapper {
    position: relative;
    border: 1px solid blue;
    overflow: hidden;
    width: 250px;
    height: 250px;
}
.container {
    overflow: auto;
    width: 100%;
    height: 100%;
}
.content {
    height: 500px;
}
.fixed {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 245px;
    border 1px solid red;
    z-index: 10;
}

这样您就不需要 jQuery 在滚动时重新定位 .fixed div，它也不会闪烁。

编辑 解决水平滚动...

$('.container').on('scroll', function() {
    var left = this.scrollLeft;
    $('.fixed').css('left', -left + 'px');
});

这应该移动 .fixed div 而不会闪烁。在您的解决方案中，闪烁是因为浏览器在滚动时移动了您的 div，然后事件处理程序再次移动了它。现在它只会移动一次。