有什么方法可以加快根据滚动而调整的元素的放置?

问题描述

我有一个元素位于左上角.它是打印管理器的一部分，并具有一些UI.这是我用来确保其在滚动中位于同一位置的代码.

I have an element which sits in the upper left hand corner. It is part of a print manager and has some UI on it. Here is the code I am using to ensure that it sits in the same place on scroll.

var printManagerElement = document.getElementById("printManager");
var windowReference = $(window);
window.onscroll = function () {
  printManagerElement.style.top = windowReference.scrollTop() + "px";
};

滚动缓慢时，没有撕裂.但是，如果我尽可能快地滚动鼠标滚轮一次，或者抓住滚动条并快速移动它，那么我会注意到瞬间的撕裂.

When the scrolling is slow, there is no tearing. But if I scroll my mousewheel as fast as possible once, or grab the scroll bar and quickly move it, then I notice a split second of tearing.

撕裂是可以预防的吗?有什么办法可以加快这段代码的速度吗?还是这种方法的替代方法?

Is the tearing preventable? Is there a way I can speed this code up? Or an alternative to this method?

编辑

div的样式如下

padding:2px;
margin:2px;
border: 1px solid blue;
background-color:white;
position:absolute;
top:0px;
left:0px;
z-index:10;

推荐答案

这里只需要CSS.

position:fixed; top:0; left:0;

这篇关于有什么方法可以加快根据滚动而调整的元素的放置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！