Any way to speed an element's placement which

2019-09-12 09:37发布

问题:

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?

edit

The div's style looks like this

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

回答1:

All you need here is CSS.

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


回答2:

I think you should use CSS instead. In your CSS file, use it as follows:

#printManager {
    position: fixed;
    top: 10px;
    left: 10px;
}

This will place your print manager 10px from the top, and 10px from the left of the browser window's top left corncer