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

【问题标题】：Grow window size as you scroll so that the scroll bar is always centered滚动时增大窗口大小，使滚动条始终居中
【发布时间】：2018-04-13 06:43:05
【问题描述】：

我正在努力实现这一点，即使用户滚动得非常快，它仍然会跟上。所以说你的窗口是 1000px 高。然后向下滚动 100 像素，然后将在窗口底部添加另外 100 个，这样滚动条就不会位于底部，而是位于现在 1200 像素高的窗口的中心。并且只需跟踪滚动速度以查看要添加多少。

到目前为止，这是我得到的

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>");
    } 


 }

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

【问题讨论】：

标签： javascript scroll

【解决方案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)

【讨论】：