javascript - 在长页面中间暂时锁定页面滚动

Question

好的，所以有一个包含长列表的网页。在列表的中间，我想锁定滚动并稍后再次启用它。这怎么可能，以便它在现代移动浏览器中表现良好？

我尝试的一个解决方案是在设置 position 到 fixed。关于 position: fixed 有这个东西——一旦设置，页面就会跳到顶部。问题是，在 iOS Safari 上，当您启用/禁用滚动时，页面会有点闪烁，而且在 Android Chrome 上也会出现非常缓慢的行为。

有更好的提示吗？

更新:我有一个带有元素列表的侧边栏菜单，虽然主页应该被锁定，但侧边栏菜单应该保持可滚动。

Answer 1

每次要查看屏幕时，只需在 html 标签中添加一个类。我在 js 模态框或灯箱上使用此方法。

您只需添加 overflow 属性即可做到这一点。

.

CSS:

html.-is-locked {
    overflow: hidden !important;
}

.

JS:

现在您只需使用 javascript 添加/删除类:

//Get HTML element
var html = document.querySelector('html');

//Activate
html.classList.add('-is-locked');

//Deactivate
html.classList.remove('-is-locked');

//Toggle
html.classList.toggle('-is-locked');