Question

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

一切顺利，直到他们点击后退按钮。

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

首先发生的事情是浏览器快速浏览到上次访问该哈希时的位置
调用我的hashchange事件，删除缩略图
现在在删除缩略图后没有足够的内容高度，窗口必须快速恢复到scrollTop为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);
}

那么我该如何停止浏览器进行滚动到以前按下后退按钮时的默认行为？

Answer 1

你可以让身体不滚动;只有身体内的元素滚动。 e.g。

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

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

因此，浏览器将始终认为正文为0％滚动。

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

1 个答案: