Question

我想要获得什么？ 我想在屏幕上删除一个不可见的div（对于用户而不是css属性），因为我让html和body滚动到带有jquery的div（scrollTop）。现在我想删除使用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)

Answer 1

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

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

显然，重命名该功能，因为它不再滚动。

Answer 2

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

Answer 3

visibility: hidden

是你正在寻找的，但我用这种问题的另一个解决方案是向下滚动到你的第二个div，让初始div在一个统一的动画中缩小它的高度直到它为0.这可以防止怪异你正在经历的颤抖滚动问题

Answer 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>

如何删除div但阻止更改滚动位置？

4 个答案: