隐藏元素后更新滚动条

Updating the scrollbar after hiding an element

本文关键字：滚动条 更新 元素 隐藏      更新时间：2023-09-26

我有一个网页，其中包含部分。每个部分都有100%的宽度和高度。我的Section1在网页的顶部。Section1下面的Section2等等。例如，我的视图在Section2上，我想隐藏Section1。Section1隐藏后，Section2位于顶部。但浏览器记得，它在Section1下面，并向下滚动一个部分到Section3。那么我应该如何避免这种滚动呢？

    <section id="1">
    </section>
    <section id="2">
    </section>
    <section id="3">
    </section>
    <script type="text/javascript">
        <!--the view is on section2-->
        $('#1').addClass('hidden');
    </script>

让我们从澄清开始：

浏览器记得它在Section1下面，然后滚动一个第3节。

浏览器不记得，也不会滚动任何内容。浏览器被滚动了x个像素，在删除第一个部分后，它仍然被滚动了x个像素，但第2部分占据的空间现在被第3部分占据。

您需要做的是将垂直滚动固定到移除div #1后的位置。当它们占据100%的高度时，它将滚动window.height:的负值

$(window).scrollTop( $(window).scrollTop() - $(window).height() );

或者，如果你想把它滚动到#2部分的开头，那么你必须这样做：

$(window).scrollTop( $("#2").offset().top );

你可以看到它在这个jsfiddle上工作：http://jsfiddle.net/7wegxuyu/4/（它包含两个例子，其中一个是注释的，您需要取消注释才能看到它的工作）

相关文章：