禁用滚动，但保持栏可见

Question

When displaying a popup on a long page I need to disable scrolling.

I've tried 3 solutions but none are acceptable.

The body: fixed & overflow-y: scroll

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

This could have been a good solution, but if I trigger the popup while having already scrolled to the end of the page, the page scrolls back to the top.

Catch mouswheel event

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

This works but I can still click on the scrollbar and scroll.

Disable scrollbar and add margin

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

This didn't add a margin. (and I'm afraid of the issues with different scrollbars width)

EDIT:

I'm trying another solution based on HostListner

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

It triggers correctly but doesn't prevent the scroll...

Answer 1

Try to calculate the scrollbar width of the browser using

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

And when popup is visible add overflow: hidden to remove scrolling with margin-right equal to the width of scrollbar so that the page does not jump using Object.assign like

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

_{>>> Note: Make sure your body has margin:0 by default}

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