Question

假设我们有一个div A，其height值较大且低于其他div B，C ....

如果用户看到B或C并A降低其高度，例如一半，然后滚动位置将保持不变，但div B，C将移动该数量到顶部。因此，将显示下一个div E，F，G ......。

是否有任何css值可以帮助保持，在这种情况下，显示B或C而不是将它们移动？或者它只能通过js（并且负向滚动高度变化量）？

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

或者你需要一个脚本。有些Javascript库可以让它变得更容易，例如Scroll Magic。它允许您在HTML页面中删除脚本并使用“控制器”来设置偏移点。

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

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

2 个答案: