10

有没有一种方法可以在网页开头插入内容而不会导致页面给人向上滚动的印象。

我正在尝试实现类似于无限滚动的东西，但我需要能够无限向上和向下滚动（我还在另一端卸载内容，以便滚动条不会变得无限小并且应用程序不会占用太多内存）。

我很高兴使用 javascript，我宁愿不使用库（我试图保持比这更轻的重量）。

有任何想法吗？

4

4 回答 4

2

在我的情况下，布局是这样的：

<div class='container'>
   <div class='list'>
      product cards...
   </div>
   <button>Load more</button>
</div>
  1. 通过单击按钮，我想从服务器获取数据，使用该数据动态创建产品卡并将此卡添加到 .list
  2. 问题是当动态卡片添加到 DOM 时，屏幕会自动滚动，我只看到最后添加的卡片，而不是第一次添加的卡片。我认为它对所有浏览器的默认行为（我可能是错的） - 如果在焦点元素浏览器滚动页面上方的 DOM 中添加的内容以焦点元素在屏幕上。如果在焦点元素下方添加的内容没有发生滚动并且焦点元素也在屏幕上。
  3. 为了解决这个问题，我只是在将卡片添加到 DOM 之前添加了一些东西document.activeElement.blur()，一切都很好。
于 2020-09-09T08:44:45.830 回答
1

您可以window.scrollBy(x, y)在添加内容时使用向下滚动（您必须计算所添加内容的高度）。

于 2011-12-12T16:06:35.233 回答
1

在执行创建元素的代码之前，只需执行以下操作：

var scrollY = window.scrollY;

window.onscroll = function(){
    window.scrollTo(0, scrollY);
    window.onscroll = null;
};

请记住，如果您已经有一个onscroll功能，则需要在此之后重新分配该功能...

于 2017-12-02T23:37:18.990 回答
0

一种可能的想法是完全绕过滚动机制并自己做。

基本上，用 . 定位每个元素display: fixed。然后，您可以使用负位置在屏幕上方加载元素。

您必须同步文档的高度（只需添加空格），以便文档滚动条正确。然后，捕获滚动事件并调整页面内所有元素的固定位置。

我不确定它会有多平滑，但我相当肯定你可以得到你想要的效果。

于 2011-12-12T16:35:27.293 回答