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

96 阅读1分钟

在看文档过程中发现有些网站能实现自动滚动到上一次阅读板块,正好看到 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