通过浏览器“后退”从另一个页面导航回来时保留滚动位置或链接回来？
我在维护滚动条位置时遇到一些问题。
背景
我的一个页面中有一个水平图像浏览器。它延迟加载图像，因此它可以滚动浏览数千张图像。当您单击每个图像时，它会将您带到包含放大图像和一些元数据的详细信息页面。从此页面中，您还可以按照您在滚动条中看到的顺序直接浏览其他详细信息页面。
编辑：澄清
有一个页面，其中包含带有 Overflow:auto 和滚动条的 HTML 元素。这个元素的内容非常非常长。当您离开并返回此页面时，我希望滚动条能够记住您上次查看的位置。
目标
我想做的是允许用户使用滚动条返回页面，而无需每次都重置到滚动条的开头。如果您使用浏览器的“后退”按钮，那么这会自动起作用，但是当您使用我的显式链接返回搜索/浏览结果时，您每次都会从头开始。 （此外，一旦人们从详细信息页面导航到详细信息页面几次（这是可能的），浏览器的“后退”按钮就会变得不太可行。）
避免的方法
我之前的尝试在所有页面之间提交了一个表单，将滚动条位置保留在 $_POST var 中，但是当您想使用后退按钮时，您会看到烦人的弹出窗口要求您确认，所以我想远离它。
我也不想将其放入 $_GET 对象中，因为这会因为多个 url 指向同一页面而扰乱页面的 SEO。
问题
您认为实现这一目标的最佳方法是什么？
- 我应该对 window.history 使用一些技巧吗？
- 我是否应该将带有滚动位置的 AJAX 请求发送到将值存储在 $_SESSION 对象中的脚本？
- 还有别的事吗？
预先感谢您的建议。
-K
I'm having some issues with maintaining scroll bar locations.
The Background
I have a horizontal image browser in one of my pages. It lazy loads its images, so it can potentially scroll through thousands of images. When you click each image, it takes you to a detail page with an enlarged image and some meta-data. From this page you can also move directly through other detail pages in the same order that you saw them in the scroller.
edit: clarifying
There is a page with an HTML element with overflow:auto and a scroll bar. The contents of this element are very, very long. When you move away and then return to this page, I would like the scroll bar to remember the last place you were looking at.
The Goal
What I would like to do is allow the user to get back to page with the scroller without it resetting to the beginning of the scroller every time. If you use the browser's "back" button, then this works automatically, but when you use my explicit link back to the search/browse results, you start at the beginning every time. (Also, the browser 'back' button becomes less feasible once people have navigated from detail page to detail page a few times, as is possible.)
Approaches to Avoid
My previous attempt submitted a form between all of the pages that kept the scroller location in a $_POST var, but then when you want to use the back button you get that annoying popup asking you to confirm, so I want to stay away from that.
I also don't want to put it into the $_GET object, as this will mess with the SEO of the pages by having multiple urls point to the same page.
The Question
What do you think is the best way to implement this?
- Should I use some cleverness with window.history?
- Should I send an AJAX request with the scroll location to a script that will store the value in the $_SESSION object?
- Something else?
Thanks in advance for your suggestions.
-K
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我最终使用的解决方案是在每个详细信息页面中设置一个具有唯一元素 id 的会话变量，然后在浏览页面中读取该会话变量并使用偏移量直接滚动到详细信息页面上最后检查的元素。
The solution that I ended up using was to set a session var with a unique element id in each detail page, then read that session var in the browse page and use offsets to scroll directly to the element that was last examined on a detail page.