禁用滚动但保持栏可见

Question

在长页面上显示弹出窗口时，我需要禁用滚动。

我尝试了3种解决方案，但没有一种是可以接受的。

身体：固定＆amp; overflow-y：滚动

document.body.style.position = 'fixed';
document.body.style.overflowY = 'scroll';

这可能是一个很好的解决方案，但如果我在滚动到页面末尾时触发弹出窗口，页面会滚动回到顶部。

Catch mouswheel事件

document.body.addEventListener("mousewheel", (e) => e.preventDefault());

这样可以，但我仍然可以点击滚动条并滚动。

禁用滚动条并添加边距

document.body.style.overflow = 'hidden';
document.body.style.marginRight = '1rem';

这没有增加保证金。 （我担心不同滚动条宽度的问题）

编辑：

我正在尝试基于HostListner的另一种解决方案

  @HostListener('window:scroll', ['$event'])
  public handleScroll(event: any) {
    console.log(event);
    event.preventDefault();
  }

它正确触发，但不会阻止滚动...

Answer 1

尝试使用

计算浏览器的滚动条宽度

var scrollbarWidth = window.innerWidth - document.body.clientWidth;

当弹出窗口可见时，添加overflow: hidden以移除滚动条，margin-right等于滚动条的宽度，以便页面不会使用Object.assign跳转

var scrollbarWidth = window.innerWidth - document.body.clientWidth;
Object.assign(document.body.style, {
  overflow: "hidden",
  marginRight: scrollbarWidth + "px"
});

_{＆gt;＆gt;＆gt; 注意： 确保您的身体默认为margin:0}

＆＃13;

＆＃13;

var scrollbarWidth = window.innerWidth - document.body.clientWidth;
Object.assign(document.body.style, {
  overflow: "hidden",
  marginRight: scrollbarWidth + "px"
});
console.log(document.body.style.marginRight);

＆＃13;

body {
  margin: 0;
}

＆＃13;

＆＃13;

＆＃13;