Question

每当从DOM中删除一个元素时，它下面的所有元素都会向上移动以获取新释放的位置。无论如何都要改变它，以便如果一个元素被聚焦在被移除的元素之下，它上面的所有元素都将向下移动（即向下滚动），聚焦元素的位置将保持不变。

请参阅此代码

<div id="foo">
  <br><br>
</div>
<textarea id="bar" onkeypress="removeFoo()"></textarea>

这是Fiddle。无论何时在文本区域中键入字符，它都会突然移动以占用通过删除div获得的可用空间。我想防止这种行为，因为它看起来很奇怪。

编辑：目标是使删除无缝。如果这个聚焦元素是可视区域中的最后一个元素，那么它肯定会向上移动，但是如果它位于屏幕中间，那么它上面的元素应向下移动，以便不移动聚焦元素。

Answer 1

您必须使用CSS滚动<divid="foo"></div>

喜欢这里看：

<style>
#foo{overflow-x:scroll;
OR
overflow-y:scroll;
}
</style>

Answer 2

如果将窗口向上移动以占据自由空间，将窗口滚动到“聚焦元素”的顶部怎么样？

function () {
      $("#id-of-elem-to-remove").slideUp();

      var focused = $("#id-of-focused-elem");
      $("html, body").animate({
        scrollTop: focused.offset().top
      }, 1000);
    });

修改：

检查JSFiddle。尝试删除“6”或“7”。

Answer 3

您需要获取当前滚动位置和可移动元素的高度，然后在删除元素后，将滚动位置设置为当前滚动位置减去元素高度：

function removeFoo() {
  var tempScrollTop = $(window).scrollTop();
  var ele = document.getElementById("foo");
  var height = ele.offsetHeight;
  console.log(tempScrollTop, height);
  ele.parentElement.removeChild(ele);
  $(window).scrollTop(tempScrollTop - height);
}

https://jsfiddle.net/du1mjmz7/3/

P.S。我添加了jquery让它更快，但你明白了。当你的脚本第二次尝试删除元素时，你的脚本也不起作用，因为元素不再存在（没有尝试修复它）

删除元素时自动滚动

3 个答案: