码迷,mamicode.com
首页 > 其他好文 > 详细

ng6.1 新特性:滚回到之前的位置

时间:2018-07-12 13:07:57      阅读:140      评论:0      收藏:0      [点我收藏+]

标签:turn   char   添加   方案   targe   cte   增加   pull   fragment   

在之前的版本中滚动条位置是一个大问题,主要表现在

1. 使用快捷键或者手势前进/后退的时候,滚动条的位置经常是错乱的,所以只能每个页面都要重置一个滚动条的位置;

2. #anchor1 锚点位置无法定位

2017年10月开始解决这个问题,历时7个月终于在 6.1 beta1 中解决了。

解决方案就是增加了一个全新的特性 Scroll Position Restoration,滚回到之前的位置。

有人详细介绍了这个特性,点我查看

今天我尝试了一下 ViewportScroller 的 scrollToAnchor,跳转到锚点。

//注入 ViewportScroller
constructor(private scroller: ViewportScroller) { }
  async ngOnInit() {
    //初始化数据之后,滚到 id=‘foot‘ 的元素那里
    this.scroller.scrollToAnchor(‘foot‘);
  }

在页面底部添加一个 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 模版中的锚点中也要加上这个字母。

ng6.1 新特性:滚回到之前的位置

标签:turn   char   添加   方案   targe   cte   增加   pull   fragment   

原文地址:https://www.cnblogs.com/kexxxfeng/p/9297981.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!