Question

我正在尝试实现一个HTML无限滚动器，在该滚动器中，在任何给定时间，列表中只有少数div元素（以保持较小的内存占用）。

我将一个新的div元素添加到列表中，同时删除第一个元素，因此div的总数保持不变。

不幸的是，视口并没有保持静止，而是向后跳了一点（实际上是被移除的div的高度）。从列表中删除div时是否有办法使视口保持静止？

我制作了一个小的自包含HTML页面（嗯，它仍然需要JQuery 3.4.1），这暴露了问题：它首先添加了5个div，然后不断添加一个新的div，并每1秒删除第一个< / p>

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

function removeit() {
  // remove first one
  var tiles = $(".tile");
  $(tiles[0]).remove();
}

function addit() {
  // append new one
  var jqueryTextElem = $('<div class="tile" style="height:100px;background-color:' + getRandomColor() + '"></div>');
  $("#inner-wrap").append(jqueryTextElem);
}

function loop() {
  removeit();

  addit();

  window.setTimeout(loop, 1000);
}

addit();
addit();
addit();
addit();
addit();

loop();

<div id="inner-wrap"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Answer 1

您可以将In [20]: read_contents = '/dev/mapper/centos-root : : : : 52403200 : 14460252 : : 37942948 : : : : : : 28% : /\n' #Get rid of empty strings, and strip leading and trailing whitespaces around the rest of the words In [21]: contents = [content.strip() for content in read_contents.split(':') if content.strip()] In [22]: contents Out[22]: ['/dev/mapper/centos-root', '52403200', '14460252', '37942948', '28%', '/'] In [23]: for item in contents: ...: print(item) ...: /dev/mapper/centos-root 52403200 14460252 37942948 28% /临时添加到父元素：

首先将position: fixed添加到父级；
然后删除该项目；
然后从父级删除position: fixed

Answer 2

我有种感觉，您正在尝试吃蛋糕，因为如果您将视口保持为“静止”，我想您的意思是您不希望用户看到滚动条移动而且还没有任何新的功能可以向下滚动页面，因为您希望滚动条的拇指/抓取器仍然位于滚动条轨道的底部？

我的意思是，您可以在示例中使用$(window).scrollTop($(window).scrollTop() + 100);来使它移除视口时，视口的滚动位置不会在视觉上移动，但是到那时，您将不会保留用户当前元素的视图相同或什至允许用户在页面下方进一步滚动浏览新内容。您只是通过用户的观点“推送”内容？

如果由于在运行时对文档对象进行了一些繁重的操作而试图减轻当前解析到文档中的内容的负担，那么也许您仍然希望删除早期的元素，但保留一些空的哨兵元素来保留其几何形状总是添加了所有先前删除的元素的高度？这将允许您都具有较小的占用空间（尽管不是布局方式），同时仍具有可以与用户进行通信的可用滚动条，并且都允许用户向下滚动到已添加的内容。 / p>

总而言之，我认为您目前所拥有的是大多数无限滚动器的工作方式和工作原理，这意味着当内容朝着用户滚动的方向添加时，滚动位置和滚动条应该发生变化，这向他们传达了他们实际上可以保持这种滚动状态。您真的不希望视口的滚动位置保持“静止”。

要更清楚地了解为什么我不认为您遇到了实际问题，请用以下内容替换您的loop()定义...

function loop() {
  $(window).scroll(function() {
    // check for reaching bottom of scroller
    if ($(window).scrollTop() == ($(document).height() - $(window).height())) {
      addit();
      removeit();
    }
  })
}

删除DOM元素时防止视口移动

2 个答案: