美文网首页web前端
定位到指定元素的位置

定位到指定元素的位置

作者: 姜治宇 | 来源:发表于2022-07-19 16:35 被阅读0次

1、scrollIntoView函数

利用dom的scrollIntoView()函数可以滚动到指定位置。

let dom = document.querySelector('.change-page');
if (dom) {
     dom.scrollIntoView(false);
}

2、scrollTop属性

利用dom的scrollTop属性,可以让滚动条滚到指定的位置,注意值要给数字,默认单位是px。

let dom = document.querySelector('.change-page');
dom.scrollTop = 800;

我们可以在页面上监听scroll事件,将滚动位置本地缓存下来,这样下次进来就可以滚动到上次浏览的位置了。

@ViewChild("pageWrapper") pagewrapper: any;
public scrollFunc: any;
...
ngDoCheck() {
    if (localStorage.getItem('scroll-location') && this.pagewrapper) {
      this.pagewrapper.nativeElement.scrollTop = Number(localStorage.getItem('scroll-location'));

    }
}
ngAfterViewInit() {
    //回调函数
    this.scrollFunc = () => {
      
      localStorage.setItem('scroll-location', "" + this.pagewrapper.nativeElement.scrollTop);
      
    }
    //滚动事件监听
    this.pagewrapper.nativeElement.addEventListener('scroll', this.scrollFunc);

}
ngOnDestroy() {
        
   this.pagewrapper.nativeElement.removeEventListener('scroll', this.scrollFunc);
}

相关文章

  • 定位到指定元素的位置

    1、scrollIntoView函数 利用dom的scrollIntoView()函数可以滚动到指定位置。 2、s...

  • 浏览器滚动相关css属性

    scroll-snap 1 .简介:网页容器滚动停止的时候,自动平滑定位到指定元素的指定位置.主要效果在最后的位置...

  • js数组的删除,插入和替换

    首先解释下本节要记录的功能:js数组删除指定位置的的元素,或者在指定位置插入元素,或者替换某个位置的元素; spl...

  • js 数组操作

    合并数组 删除指定索引 指定位置插入元素

  • Swift 基础语法学习(四)

    数组的简单使用 实例化数组 数组元素的增加 移除数组中的元素 替换数组中指定位置的元素 查询数组中指定位置的元素

  • CSS之定位和opacity使用

    定位:将指定的元素放在指定的位置,通过定位可以任意的排放元素,定位分为:相对定位,绝对定位,固定定位 和默认的值 ...

  • Java之ArrayList实现原理(jdk11)

    一. 构造函数二. 添加元素2.1 添加一个元素到末尾2.2 将指定的元素插入此列表中的指定位置2.3 将一个指定...

  • CSS----定位(相对、绝对、固定)

    定位: 指定的元素摆放到页面的任意位置 通过定位可以任意的摆放元素 通过position属性来设置元素的定位...

  • 线性表

    [TOC] 带头结点的单向链表 获取元素 指定位置插入一个结点 指定删除一个结点 循环双向链表 定义 指定位置插入...

  • NF特种部队1:黎明行动

    “克尔进入指定位置!”克莱拉进入指定位置!”麦林进入指定位置!”里昂进入指定位置!”斯科特进入指定位置!” 老鸟的...

网友评论

    本文标题:定位到指定元素的位置

    本文链接:https://www.haomeiwen.com/subject/xoqsirtx.html