当div高度更改时更改滚动位置

Question

假设我们的div A的height值较大，并且低于其他div B ， C ...。

如果用户看到B或C，而A将其高度减小了一半，则滚动位置将保持不变，但div B，C将移动该高度到顶部。 因此，将显示下一个div E，F，G...。

在这种情况下，是否有任何CSS值可以帮助保持B或C而不是向上移动？ 还是只能通过js（负向滚动高度变化量）来实现？

Answer 1

调整元素大小后，您将不得不调整当前滚动，请尝试此操作，如果它适合您，请根据需要进行调整。

该演示将在3秒后调整第一个元素的大小，并相应地修改滚动位置。

 const target = document.querySelector('.target'); function resizeTarget(newHeight) { const doc = document.documentElement; const top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0); target.style.height = newHeight + 'px'; const viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); if (target.offsetTop + newHeight < top + viewportHeight ) { window.scroll(0, top - newHeight); } } setTimeout(() => { resizeTarget(200); }, 3000); 

 .box { width: 300px; height: 200px; background: tomato; margin: 10px; } .target { height: 400px; background: teal; } 

 <div class="box target"></div> <div class="box"></div> <div class="box"></div> 

Answer 2

我不能完全确定“降低高度”是什么意思，但不能使用严格的HTML和CSS来更改高度并移动div。 您可以查找CSS之前/之后。

否则您将需要一个脚本。 有一些可以简化操作的Javascript库，例如Scroll Magic。 它允许您在HTML页面中放置脚本并使用“控制器”来设置偏移点。

http://scrollmagic.io/docs/index.html