向下滚动单个页面时是否可以更改 url [英] Is it possible to have the url change while you scroll down a single page

问题描述

是否可以在使用 ajax 向下滚动单个页面时更改 url?我在一个页面上有一个网站，并且想要有这种效果.

Is it possible to have the url change while you scroll down a single page with ajax? I have a website all on one page and want to have this effect.

示例:

www.blablabla.com/blog

用户向下滚动...

www.blablabla.com/blog/entry-name

我知道哈希...我可以屏蔽 URL 吗?

I know about hashing... can I mask the URL?

推荐答案

我知道这是一个老问题，但浏览器发生了变化，现在，可以按照发布者的要求进行操作.这意味着大多数其他答案不再有效.我发布了一种方法来实现这一点，以便它可以帮助人们使用 Google 找到正确的答案.

I know this is a bit of an older question, but browsers changed, and right now, it is possible to do what the poster requested. This means that most of the other answers are no longer valid. I'm posting a way to accomplish this so that it might help people using Google to find the correct answer.

简而言之，在现代浏览器(支持 HTML 5 的浏览器)上，您可以.请查看这篇文章.

In short, on modern browsers (browsers with HTML 5 support) you can. Please have a look at this article.

它基本上归结为以下代码行:

It basically boils down to the following line of code:

window.history.pushState("object or string", "Title", "/new-url");

执行上述代码会将 URL 更改为 example.com/new-url，并将帮助您完成所需的操作.

Executing the above code will change the URL to example.com/new-url, and will help you accomplish what you wanted.

对于演示，您可以查看Webby Awards，使用此方法的地方.只需向上或向下滚动并查看地址即可.效果相当可观.

For a demo, you can take a look at the Webby Awards, where this method is used. Just scroll up or down and look at the address bare. The effect is pretty impressive.

这篇关于向下滚动单个页面时是否可以更改 url的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！