我有一个页面，其中各种元素的内容通过 AJAX 加载到一个核心结构中。结构本身非常简单，元素上没有任何特殊定位:
<body>
<article id="one"></article>
<article id="two"></article>
<article id="three"></article>
</body>
每篇文章的内容都是通过 AJAX 调用加载的，每篇文章的内容长度无法提前得知。此外，每个部分都可以使用 URL 导航(这样我就可以使用 mysite.com/two 到达 #two；它加载页面并向下滚动到请求的文章).
这很好用，当然，在加载完所有内容之后，但我的麻烦是当目标元素之前的内容尚未加载时。因为元素必须扩展以适应内容，它会向下推目标元素，所以不是这样:
____________________
| Target Element |
| |
|__________________|
| Next Element |
|__________________|
你明白了:
_____________________
| Previous Element |
| |
| |
|___________________|
| Target Element |
|___________________|
我试过为内容 block 设置一个最小高度，但这只在部分时间有效，而且只有在最终高度接近原始高度时才真正有效。
理想情况下，我希望视口(viewport)相对于内容保持相同的位置，即使用户在所有内容加载之前已经滚动，但我会满足于在用户尝试之前保持位置滚动。
有什么办法可以做到这些吗？
最佳答案
这个怎么样:
- 在加载 ajax 调用之前获取任何先前元素的高度。保存它。
- if 完成加载后，ajax 调用成功完成，获取新的高度。
- 使用差值计算它大了多少。
- 将页面向上滚动该量。
如果元素在当前元素之后，则不要滚动。
放在一边
这是我最讨厌的网页之一。他们加载，你开始阅读。然后一个 2 英寸高的添加滑入并将您正在阅读的内容移出页面。或者更糟糕的是，当您向下滚动并开始阅读时，文本会不知为何从页面底部滑落，因为一个看不见的添加项会自行加载到上方。
关于javascript - 保持一个特定的元素在 View 中，即使它 previous sibling 姐妹正在增长？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18085884/