CSS 在 OSX Safari 上滚动事件无响应和抖动期间的定位（适用于 Chrome/Firefox）

Question

我的网站上有一个粘性边框，在 window 的滚动事件期间，我更新它以在用户滚动时跟随 window。

CSS:

.fixed {
    position: relative;
    background: black;
    color: white;
    height: 40px;
}
.container {
    height: 2000px;
}

HTML:

<div class="container">
    <div class="fixed">Fixed</div>
</div>

JS:

$(window).scroll( function() {
    $('.fixed').css({top: $(window).scrollTop()});   
});

演示：https://jsfiddle.net/xt8c00yq/

我知道滚动事件在移动浏览器上不可靠且无响应，所以我已经为设备禁用了它。但是，它在桌面版 Safari 上似乎也有延迟和抖动。它在 Chrome 和 Firefox 上都运行良好。在两种浏览器上测试演示以亲身体验。

是否有任何已知的技巧可以使其在 Safari 上也能顺利更新？

（position:fixed 不是一个选项，因为它需要流动以响应未固定的兄弟 css 转换）

Answer 1

利用 translate3d 进行硬件加速渲染。

$(window).scroll( function() {

    scrolled = $(window).scrollTop();   

    $('.fixed').css({
        '-webkit-transform' : 'translate3d(0,' + scrolled + 'px,0)',
        '-moz-transform'    : 'translate3d(0,' + scrolled + 'px,0)',
        '-ms-transform'     : 'translate3d(0,' + scrolled + 'px,0)',
        '-o-transform'      : 'translate3d(0,' + scrolled + 'px,0)',
        'transform'         : 'translate3d(0,' + scrolled + 'px,0)'
    });

});

CSS 在 OSX Safari 上滚动事件无响应和抖动期间的定位（适用于 Chrome/Firefox）

CSS positioning during scroll event unresponsive and jittery on OSX Safari (works in Chrome/Firefox)

html

javascript

css

safari

scroll