如何删除 div 但防止更改滚动位置？答案

【问题标题】：How to remove a div but prevent the scroll position to be changed?如何删除 div 但防止更改滚动位置？
【发布时间】：2017-05-25 10:29:18
【问题描述】：

我想要达到什么目标？ 我想删除屏幕上不再可见的 div（对于用户不是 css 属性），因为我让 html 和 body 使用 jquery（scrollTop）滚动到 div。现在我想删除在我用 jquery 向下滚动之前可见的 div。

编辑：删除 .header div 后，#begining 应该是页面顶部，并且 .header div 应该被永久删除。

有什么问题？ 在我向下滚动并使用以下代码行删除 div 后：$('.header').css('display','none'); 滚动位置发生变化。

向下滚动并删除 div 的代码。

function scrollToBegining(){
        $('html, body').animate({
            scrollTop: $("#begining").offset().top
        }, 750);

        setTimeout(function(){
            $('.header').css('display','none');
        },750);

    }

问题可视化： GIF of the problem (Watch to understand better)

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

您可以使用visibility: hidden 隐藏 div 但保留其空间。此外，有时在使用display: none 时必须更改滚动位置。

【讨论】：

是的，但我不想保留空间。它应该永远消失，#begining 是在删除页面顶部的 .header div 之后。不过谢谢你的回答。

【解决方案2】：

这很奇怪，但我认为更好的选择是 slideUp div 而不是滚动：

function scrollToBegining(){
    $('.header').slideUp(750);
}

显然，重命名函数，因为它不再滚动。

【讨论】：

是的，这可行，但看起来有点不同。还不错，但你有其他想法为什么我会得到这种“滚动条跳跃”效果吗？
这只是因为你在做什么。我认为这种方法更好，因为如果你想把标题带回来，你只需用 slideDown 反转它。它更干净、更简洁。
我非常同意你的看法。谢谢你的回答。

【解决方案3】：

visibility: hidden

是您正在寻找的，但是我在此类问题上使用的另一种解决方案不是向下滚动到您的第二个 div，而是让初始 div 在统一动画中缩小其高度，直到它为 0。这可以防止奇怪您遇到的颤抖滚动问题

【讨论】：

有点像 jquery slideUp() 函数？
是的，如果您在应用程序中使用 jquery 也可以使用

【解决方案4】：

document.querySelector('#header h1').addEventListener('click', closeHeader)
function closeHeader(){
	document.querySelector('#header').classList.add("hidden");
}

#header {
  height: 300px;
  width: 100%;
  background: red;
  text-align: center;
}

#content {
  height: 1000px;
  width: 100%;
  background: yellow;
  text-align: center;
}

.hidden {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

<div id="header">
  <h1>
    HEADER
  </h1>
</div>
<div id="content">
  CONTENT
</div>

【讨论】：

再次显示标题：document.querySelector('#header').classList.remove("hidden");
感谢您的回答，但我想将它与 jquery scrollTop() 函数一起使用。我应用了您的代码，在让 js 向下滚动后，我使用了您的代码行： document.querySelector('#header').classList.add("hidden");隐藏标题但是..问题仍然存在（滚动条向下跳）
内容变小，滚动条停留在滚动索引处。然后你需要向上或向下滚动差异。 var startIndex = scroll.index; hideHeader(); var newIndex = scroll.index; var scrollHeight = startIndex - newIndex; 但我不知道你是如何获得滚动索引的。只是说你可以尝试什么。
你的功能的问题是：1）你滚动到#begining的位置2）你删除#header3）内容变小4）滚动动画持续750ms。 5) 删除最后 0 毫秒的 div --> 你在 300 像素，而不是删除 300 像素 --> 你在 600 像素 --> 滚动条从 300 像素跳到 600 像素。
我用window.scrollTo(0,0) 试过了，但没用，然后我添加了 1 毫秒的延迟，仍然无效，我尝试了 10 毫秒，它有效，但显然它看起来很不稳定..