Question

我试图实现这一点，即使用户滚动速度非常快，它仍然可以跟上。所以说你的窗口是1000px高。然后向下滚动100px，然后另外100个将添加到窗口的底部，这样滚动条不会位于底部，而是居中在一个现在为1200px高的窗口中。并且只需跟踪滚动速度即可查看要添加的内容。

到目前为止这是我得到的

var checkScrollSpeed = (function(settings){
settings = settings || {};

var lastPos, newPos, timer, delta, 
    delay = settings.delay || 50; // in "ms" (higher means lower fidelity )

function clear() {
  lastPos = null;
  delta = 0;
}

clear();

return function(){
  newPos = window.scrollY;
  if ( lastPos != null ){ // && newPos < maxScroll 
    delta = newPos -  lastPos;
  }
  lastPos = newPos;
  clearTimeout(timer);
  timer = setTimeout(clear, delay);


  return delta;


};  })();

window.onscroll = function(){
var speedometer = document.getElementById('speed');
var current = checkScrollSpeed();
speedometer.innerHTML = current;

    for (i = 0; i <= current; i++) {
    $("#loop").append("<br>");
    } 


 }

它有点工作，但不是真的，在某些速度下增加了太多的休息时间。循环崩溃，如果它变为快速

Answer 1

这需要一些工作来根据您的具体情况进行调整，但概念应该是好的。

基本上，每当滚动时，您需要为页面级元素添加一些余量，等于当前滚动高度。

function scrollTest() {
    var s = $("html").scrollTop();
    // add the total height of elements on your page here, if you want to consider that.  like s += 1000 if you have 1000px of page content.
    var newValue = s + "px";
    $("#yourElement").css("margin-bottom", newValue);
}

注册：

window.addEventListener("scroll", scrollTest)

滚动时增大窗口大小，使滚动条始终居中

1 个答案: