Scroll to Text Fragment - 页面滚动到特定文字片段处

我们都知道,URL中有个hash属性,用于定位页面上某个id元素,对于文档类的文章, 收藏和分享的时候,可以定位到具体的位置,十分有用。

当然我们也可以有一些有趣的使用方法,比如文章的分页,使用ajax请求数据。比如我们翻页到第5页,不小心刷新了页面,又会回到默认第一页。
但是对于博客园,我们可以看到,每次ajax请求后,URL会加上#p{number},如果不小心刷新页面,也会根据hash值获取当前页,然后查询当前页的数据。
算是个用户体验提升吧。

Scroll to Text Fragment

那么,如果我要分享一篇文章给其他人,文章很长,我只想让他看其中的某段或者某句,但是文章是第三方平台上,排版不一定恰好如我所愿。
于是,我们就有了这样一个需求,希望在URL中加上某个规则,再打开的时候,会自动滚动到我希望的位置。
W3C也在推进这个事情,有的浏览器也已经支持该特性了。

使用

语法如下:

#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
  1. 只传入textStart则只高亮并滚动到符合条件的第一个
    比如:https://news.cnblogs.com/n/719980/#:~:text=加速器

  2. textStart 和 textEnd同时传入可以选中某一段落
    https://news.cnblogs.com/n/719980/#:~:text=到目前为止,希望之一

  3. prefix 和 suffix主要是限定所选词的位置
    https://news.cnblogs.com/n/719980/#:~:text=进入-,暗物质,-研究

浏览器兼容性

Chrome80开始支持该特性,其他浏览器未测。

参考

https://wicg.github.io/scroll-to-text-fragment/
https://chromestatus.com/feature/4733392803332096
https://web.dev/text-fragments/
https://stackoverflow.com/questions/62161819/what-exactly-is-the-text-location-hash-in-an-url

posted @ 2022-05-03 13:28  talentzemin  阅读(108)  评论(0编辑  收藏  举报