代码片段

记录一些容易忘记但又有用的代码代码片段或者Api

BOM

window.history.scrollRestoration

用于恢复浏览器的滚动条高度，有时可能不需要可以禁用

  • manual 未还原页上的位置
  • auto 将恢复用户已滚动到的页面上的位置
1
history.scrollRestoration = 'manual';

HTML

JS

CSS

Scroll Anchoring

滚动锚定，chrome 为了优化体验会在页面视窗外的元素导致滚动条发生改变时，会自动重新定位到当前位置，体验页面完全不闪动。

但会导致页面点击下一页，异步加载时没办法看到最新内容，体验像是个bug
https://bugs.chromium.org/p/chromium/issues/detail?id=1102229

禁用可以通过如下css在你下一页的按钮

1
overflow-anchor: none;

overscroll-behavior

浏览器滚动边界控制，可以用来禁用滚动穿透或者浏览器的默认行为等

https://developers.google.com/web/updates/2017/11/overscroll-behavior