防止浏览器捕捉到后退按钮上的上一个滚动位置

Question

In my AJAX application, there is a main page with folders that contain images. 在我的AJAX应用程序中，有一个包含图像的文件夹的主页面。 When the user clicks a folder it hides the folders and then repopulates the same div with images from that folder. 当用户单击文件夹时，它会隐藏文件夹，然后使用该文件夹中的图像重新填充相同的div。 This is all done using hashtags. 这都是使用主题标签完成的。

Everything works great until they click the back button. 一切都很好，直到他们点击后退按钮。

When the user clicks the back button, this happens (in sequence, every time): 当用户单击后退按钮时，会发生这种情况（按顺序，每次）：

the very first thing that happens is the browser snaps down to where it just was when last visiting that hash 发生的第一件事就是浏览器快速浏览到上次访问该哈希时的位置
my hashchange event is called which removes the thumbnails 调用我的hashchange事件，删除缩略图
now that there is not enough of a content height after the thumbnails have been removed, the window has to snap back up to a scrollTop of 0 as there is, for a split second, no scrollbar 现在，在删除缩略图后没有足够的内容高度，窗口必须快速恢复到0的scrollTop，一瞬间，没有滚动条
then the folders are shown again 然后再次显示文件夹
then my script kicks in to restore the user to where they were on the page 然后我的脚本开始将用户恢复到他们在页面上的位置

The problem: This creates really bad flickering because of how much the scrollbar is being snapped around. 问题：由于滚动条被卡住了多少，这会产生非常糟糕的flickering 。

The solution: Making the browser not try to restore its scroll position when the hash changes. 解决方案：当哈希值发生变化时，浏览器不会尝试恢复其滚动位置。

How do I know this will work? 我怎么知道这会起作用？ When I set up a button/link on my site to do the above, the flickering does not occur because the browser does not automatically try to scroll down. 当我在我的网站上设置按钮/链接以执行上述操作时，不会发生闪烁，因为浏览器不会自动尝试向下滚动。 Why can't putting my own back button on the site be the solution? 为什么不能在网站上放置我自己的后退按钮？ People really like their browser back button and the flickering is really annoying. 人们真的很喜欢他们的浏览器后退按钮，闪烁真的很烦人。

I included some code below, but I don't think it is really necessary to look at: 我在下面提供了一些代码，但我认为没有必要看一下：

// called when a folder is clicked
function hide_main() {
    window.scroll_top = $(window).scrollTop();

    $('#favorite_container').hide();
    $('#top_div > h2.favorite_main').hide();
}

// called when the user wants to go back to the main page that lists all the folders
function show_main() {
    $$.vars.lock = true;

    $('#top_div > h2.favorite_other').remove();
    $('#thumbs').empty();

    $('#top_div > h2.favorite_main').show();
    $('#favorite_container').show();

    $('html, body').scrollTop(window.scroll_top);
}

So how do I go about stopping the browser from doing its default behaviour of scrolling to the position it previously was when the back button is pressed? 那么，如何停止浏览器执行滚动到按下后退按钮时之前的位置的默认行为？

Answer 1

You can make it so the body does not scroll; 你可以让身体不滚动; only elements inside the body scroll. 只有身体内的元素滚动。 eg 例如

<body>
    <div id="content">
    </div>
</body>

#content {
    position:absolute; top:0; left:0; bottom:0; right:0;
    overflow-y:scroll;
}

Thus the browser will always think the body is at 0% scroll. 因此，浏览器将始终认为正文为0％滚动。

防止浏览器捕捉到后退按钮上的上一个滚动位置

问题描述

1 个解决方案

解决方案1
2 已采纳 2011-06-20 05:57:42

防止浏览器捕捉到后退按钮上的上一个滚动位置

问题描述

1 个解决方案

解决方案1 2 已采纳 2011-06-20 05:57:42

解决方案1
2 已采纳 2011-06-20 05:57:42