ng6.1 新特性:滚回到之前的位置
在之前的版本中滚动条位置是一个大问题,主要表现在
1. 使用快捷键或者手势前进/后退的时候,滚动条的位置经常是错乱的,所以只能每个页面都要重置一个滚动条的位置;
2. #anchor1 锚点位置无法定位
2017年10月开始解决这个问题,历时7个月终于在 6.1 beta1 中解决了。
解决方案就是增加了一个全新的特性 Scroll Position Restoration,滚回到之前的位置。
有人详细介绍了这个特性,点我查看
今天我尝试了一下 ViewportScroller 的 scrollToAnchor,跳转到锚点。
//注入 ViewportScroller
constructor(private scroller: ViewportScroller) { }
在页面底部添加一个 id='foot' 的元素,注意要保证该元素超过浏览器的视野,不然就不会出现滚动条了,也就看不到效果了。
测试结果很成功,于是改成正式代码
ngOnInit() { //初始化 this.scroller.scrollToAnchor(this.route.snapshot.fragment); }
结果报错了
Uncaught (in promise): SyntaxError: Failed to execute 'querySelector' on 'Document': '#8e2c2c4e-3722-4645-bd12-af14da8cef96' is not a valid selector.
Error: Failed to execute 'querySelector' on 'Document': '#8e2c2c4e-3722-4645-bd12-af14da8cef96' is not a valid selector.
原来是 selector 选择器不正确,但是为什么不正确呢?看看它的实现就知道了。
// https://github.com/angular/angular/pull/20030/files
+ scrollToAnchor(anchor: string): void { + if (this.supportScrollRestoration()) { + const elSelectedById = this.document.querySelector(`#${anchor}`); + if (elSelectedById) { + this.scrollToElement(elSelectedById); + return; + } + const elSelectedByName = this.document.querySelector(`[name='${anchor}']`); + if (elSelectedByName) { + this.scrollToElement(elSelectedByName); + return; + } + } + }
原来内部调用的是 querySelector,在 MDN 上看一下文档,原来必须是 css 选择器
Note: Characters that are not part of standard CSS syntax must be escaped using a backslash character. Since JavaScript also uses backslash escaping, be especially careful when writing string literals using these characters. See Escaping special characters for more information.
而我的代码里用的是 GUID,由于以数字开头,所以不符合语法规范。解决办法就很简单了,在它前面加一个字母就行了。
ngOnInit() { //初始化 this.scroller.scrollToAnchor('a'+this.route.snapshot.fragment); }
别忘了在 HTML 模版中的锚点中也要加上这个字母。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· .NET10 - 预览版1新功能体验(一)