删除元素时自动滚动

Whenever an element is removed from DOM, all elements below it move up to take the newly freed position. Is there anyway to change it so that if an element is focussed which is below the removed element, all element above it will move down (i.e. scroll down) and focussed element's position will remain unchanged.

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

See this code

看到这段代码

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

Here is the Fiddle. Whenever you type a character in text area it abruptly moves to take up the free space obtained by removing the div. I want to prevent this behaviour as it looks odd.

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

Edit: Objective is to make the removing seamless. If this focussed element is last element in viewable area then it will definitely move up, however if it is in middle of screen then elements above it should move down so that focussed element is not moved.

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

3 个解决方案

#1

you must use CSS to scroll the <divid="foo"></div>

你必须使用CSS滚动

Like here see:

在这里看到:

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

#2

You need to get current scroll position and removable element's height, then, after removing the element, set the scroll position to the current scroll position minus element height:

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

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. I added jquery to make it faster for me, but you get the idea. Also your script doesn't work when it tries to remove element second time because element doesn't exist anymore (didn't try to fix it)

附:我添加了jquery让它更快,但你明白了。当你的脚本第二次尝试删除元素时,你的脚本也不起作用,因为元素不再存在(没有尝试修复它)

#3

How about scrolling the window to the top of "focused element" after it moves up to take the free space?

如何在向上移动以占据*空间后将窗口滚动到“聚焦元素”的顶部?

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

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

Edit:

Check this JSFiddle. Try removing "6" or "7".

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

#1