防止浏览器捕捉到后退按钮上的先前滚动位置答案

【问题标题】：Prevent browser from snapping to previous scroll position on back button防止浏览器捕捉到后退按钮上的先前滚动位置
【发布时间】：2011-06-20 05:35:51
【问题描述】：

在我的AJAX 应用程序中，有一个主页，其中包含包含图像的文件夹。当用户单击文件夹时，它会隐藏文件夹，然后使用该文件夹中的图像重新填充相同的 div。这一切都是使用主题标签完成的。

在他们点击后退按钮之前，一切都很好。

当用户单击后退按钮时，会发生这种情况（按顺序，每次）：

首先发生的事情是浏览器会迅速回到上次访问该哈希时的位置
我的hashchange 事件被调用，它会删除缩略图
现在在删除缩略图后没有足够的内容高度，窗口必须快速恢复到 0 的滚动顶部，因为一瞬间没有滚动条
然后文件夹再次显示
然后我的脚本启动以将用户恢复到他们在页面上的位置

问题：这造成了非常糟糕的flickering，因为滚动条被捕捉到了多少。

解决方案：让浏览器在哈希值变化时不尝试恢复其滚动位置。

我怎么知道这会起作用？当我在我的网站上设置按钮/链接来执行上述操作时，不会发生闪烁，因为浏览器不会自动尝试向下滚动。为什么不能将我自己的后退按钮放在网站上作为解决方案？人们真的很喜欢他们的浏览器后退按钮，而且闪烁真的很烦人。

我在下面包含了一些代码，但我认为没有必要查看：

// 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);
}

那么我该如何阻止浏览器执行其默认行为，即滚动到按下后退按钮时的位置？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

你可以让它不滚动；只有身体内的元素滚动。例如

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

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

因此浏览器将始终认为正文处于 0% 滚动状态。

【讨论】：

这会导致#content div 上有滚动条，对吧？这看起来会比闪烁更糟糕，但感谢您的尝试（：
@Conner：我认为这不是真的。如果您的页面不需要滚动条，它将没有滚动条（例如，如果需要，您可以设置 overflow:hidden）。如果您不使用此方法，它将在您有滚动条的地方有滚动条。它实际上与不使用这种技术没有区别。除了它可能会欺骗浏览器不滚动后退按钮。
感谢您的回复，但请确保改为使用@Connor，以便我收到通知:) 我会尝试，但我很确定这将为 div 本身创建另一个滚动条除了标准文档滚动条
@Connor：这里的想法是删除标准文档滚动条并用人工滚动条替换它，保持其他一切相同
在页面上有另一个滚动条在设计上真的不会飞:(