禁用滚动但保持栏可见

Question

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

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

主体：固定 & 溢出-y：滚动

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

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

捕捉鼠标事件

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"
});

_{>>>注意：确保你的body默认有margin:0}

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

body {
  margin: 0;
}