客户端返回时保持大 HTML 页面的滚动位置 [英] Maintain Scroll Position of large HTML page when client returns

问题描述

我提供很长的 html 页面(短电子书)

I'm serving very long html pages (short ebooks)

当客户返回时，由于 html 页面很长，很难找到确切的位置.

When client returns, too much of a hassle to try to find exact place where left off due to long html page.

是否有一种简单的方法可以自动保持滚动位置，以便下次客户端返回页面时，页面会自动向下滚动到他离开的位置.这需要是透明的，即没有点击存储"滚动位置.

Is there a simple way to maintain the scroll position automatically so that next time the client returns to the page the page scrolls down automatically to where he left off. this needs to be transparent, i.e. no clicking to "store" scroll position.

推荐答案

步骤很简单，但是这个问题的解决方案取决于你的app实现，你可以:

The steps are simple, but the solution to this question depends on your app implementation, you can:

• 检索当前滚动位置，可以使用:

• Retrieve the current scroll position, you can use:

window.pageYOffset

存储位置，这有两部分，时间和地点:

Store the position, this has two parts, when and where:

• 您可以选择在窗口关闭时或每次用户滚动时存储数据，或在设定的时间间隔内存储数据...

• You can chose to store the data, when the window closes, or every time the user scroll, or on a set interval...

对于where"，根据您的应用程序，您可能希望将其存储在 cookie、本地存储、服务器端(如果用户需要登录以阅读电子书))...

for the "where", depending on your app, you may want to store it, in a cookie, local-storage, on the server-side (if the user needs to log in to read the eBook)...

在用户返回时恢复位置，通过检索存储的数据，并使用

Restore the position when the user return, by retrieving the stored data, and scroll to that position using

window.scrollTo(0, position);

所以这里真正的问题是，何时何地存储位置，这取决于您的应用程序.

so the real problem here is, when and where to store the position, and that depends on your application.

这篇关于客户端返回时保持大 HTML 页面的滚动位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！