记录文档阅读位置自动滚动

willwe

于 2023-08-07 00:34:41 发布

阅读量119

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/willwe/article/details/132138050

版权

在看文档过程中发现有些网站能实现自动滚动到上一次阅读板块，正好看到 scrollIntoView 这个api可以将一个 DOM 节点滚动到视口，具体操作如下：

DOM.scrollIntoView({behavior:'smooth'});

理论上我们只需要将当前阅读模块的id存储起来，在页面加载后onload时读取是否存在记录id，若存在则获取该节点然后执行DOM .scrollIntoView({behavior:‘smooth’} ) ;，就可以实现页面自动滚动到上一次阅读模块。

它的可配置参数如下：

1. alignToTop: true|false;
    窗口滚动后元素的顶部与视口顶部对齐｜底部对齐
    
2. scrollIntoViewOptions: object
    2.1 behavior: smooth|auto
        过渡动画,默认auto
    2.2 block: start、center、end、nearest
        垂直方向对齐,默认 start
    2.3 inline: start、center、end、nearest
        水平方向对齐，默认 nearest