Question

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

我尝试过的一个解决方案是在设置position到{{1}之前将正文top样式设置为固定，将scrollTop样式设置为position样式}。关于fixed有这个问题 - 一旦设置，页面就会跳到顶部。问题是，在iOS Safari上，当您启用/禁用滚动时，页面会闪烁，并且在Android Chrome上也会出现非常滞后的行为。

有更好的提示吗？

更新：我有一个带有项目列表的侧边栏菜单，当主页面应该被锁定时，侧边栏菜单应该保持可滚动状态。

Answer 1

每次想要查看屏幕时，只需在html-tag中添加一个类。我在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');

Answer 2

尝试在身体上而不是position:fixed：

body.locked{
  height: 100vh;
  overflow: hidden;
}

它将保持滚动位置，但阻止滚动。

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

2 个答案: