JavaScript中保存与恢复视图方法咨询：模态页关闭后视图偏移问题

刚好我之前也碰到过类似的场景，你要找的其实是和浏览器滚动位置相关的JavaScript API，主要分为全局窗口和可滚动元素两类：

一、全局窗口的滚动位置（整个页面的视图） #

保存当前位置 #

你可以通过以下属性获取当前页面的滚动坐标：

• window.pageXOffset：获取水平方向的滚动距离（相对于文档左侧）
• window.pageYOffset：获取垂直方向的滚动距离（相对于文档顶部）
  这两个是标准属性，兼容绝大多数现代浏览器。如果要兼容非常旧的浏览器，也可以用document.documentElement.scrollLeft/scrollTop或者document.body.scrollLeft/scrollTop，不过pageXOffset/pageYOffset更推荐。

恢复到之前的位置 #

用window.scrollTo()方法来恢复滚动位置，它有两种调用方式：

• 直接传入x和y坐标：window.scrollTo(savedX, savedY)
• 传入配置对象：window.scrollTo({ top: savedY, left: savedX, behavior: 'auto' })
  其中behavior参数可选，设为'auto'是瞬间跳转（符合恢复视图的需求），设为'smooth'会有平滑滚动效果。

二、特定可滚动元素的视图位置（比如页面内的滚动容器） #

如果你的页面有自定义的可滚动元素（不是整个窗口），就需要针对元素操作：

保存当前位置 #

获取元素的scrollLeft（水平滚动距离）和scrollTop（垂直滚动距离）属性，比如：

const scrollableEl = document.querySelector('.your-scrollable-element');
const savedScrollLeft = scrollableEl.scrollLeft;
const savedScrollTop = scrollableEl.scrollTop;

恢复到之前的位置 #

同样可以用元素的scrollTo()方法，或者直接设置scrollLeft/scrollTop属性：

• 用方法：scrollableEl.scrollTo(savedScrollLeft, savedScrollTop)
• 直接赋值：scrollableEl.scrollLeft = savedScrollLeft; scrollableEl.scrollTop = savedScrollTop;

另外补充个小背景：这种模态框关闭后跳回左上角的问题，大多是因为打开模态时给body加了overflow: hidden隐藏滚动条，浏览器会自动把页面滚动位置重置为0，所以你需要在打开模态的瞬间保存滚动位置，等模态关闭、移除overflow: hidden样式之后再恢复位置。

内容的提问来源于stack exchange，提问作者mutopo