Lock the vertical scroll of the body without affecting the current scroll position

Question

Lock the vertical scroll of the body without affecting the current scroll position

Recently, I created a modal that hides the scroll bar on the body to allow users to only scroll through the modal content.

The problem arises when I apply overflow-y:hidden - the body scrolls to the top, but I actually want to preserve the page's position.

<body>
    Long content
</body>

scrollY is at 1000

<body style="overflow-y:hidden">
    Long content
</body>

scrollY goes to 0

I've considered saving the current scrollY position and scrolling back once overflow-y is removed. However, this solution doesn't give me the desired effect.

Does anyone have any other suggestions or a better solution?

javascript html css

Answer 1

Answer №1

If you want to ensure the main content of your page is not interacted with until a modal is actioned (closed), one approach could be to wrap your existing content in a div and overlay it with a mask to prevent interactions. Here's an example:

<body>
  <div class='content'>
    Your original content here
  </div>
  <div class="modal-mask">
    <div class="modal">Modal content goes here</div>
  </div>
</body>

By giving the modal mask absolute positioning and covering the entire screen, you can then position your modal where needed on top of it.

Answer 2

If you want to ensure the main content of your page is not interacted with until a modal is actioned (closed), one approach could be to wrap your existing content in a div and overlay it with a mask to prevent interactions. Here's an example:

<body>
  <div class='content'>
    Your original content here
  </div>
  <div class="modal-mask">
    <div class="modal">Modal content goes here</div>
  </div>
</body>

By giving the modal mask absolute positioning and covering the entire screen, you can then position your modal where needed on top of it.

Answer 3

Answer №2

Sorry for the delay in response :-D, but I hope this information will be beneficial to someone.

let isLocked = false;
export const addScrollLock = () => {
  if (isLocked) return;

  document.body.style.top = `${window.pageYOffset}px`;
  document.body.classList.add('scroll-lock'); // class with "overflow: hidden" or "position: fixed"
  isLocked = true;
};
export const removeScrollLock = () => {
  const scrolled = parseInt(body.style.top) * -1;

  body.classList.remove('scroll-lock');
  window.scrollTo(0, scrolled);
  isLocked = false;
};

Please remember to call addScrollLock before displaying a new fullscreen popup so that the function can calculate the correct scroll position. Otherwise, you may experience window.pageYOffset = 0 and be scrolled to the top after calling removeScrollLock.

Answer 4

Sorry for the delay in response :-D, but I hope this information will be beneficial to someone.

let isLocked = false;
export const addScrollLock = () => {
  if (isLocked) return;

  document.body.style.top = `${window.pageYOffset}px`;
  document.body.classList.add('scroll-lock'); // class with "overflow: hidden" or "position: fixed"
  isLocked = true;
};
export const removeScrollLock = () => {
  const scrolled = parseInt(body.style.top) * -1;

  body.classList.remove('scroll-lock');
  window.scrollTo(0, scrolled);
  isLocked = false;
};

Please remember to call addScrollLock before displaying a new fullscreen popup so that the function can calculate the correct scroll position. Otherwise, you may experience window.pageYOffset = 0 and be scrolled to the top after calling removeScrollLock.

Lock the vertical scroll of the body without affecting the current scroll position

Answer №1

Answer №2

Similar questions

What's the best way to dynamically show Bootstrap collapse panels in a loop with AngularJS ng-repeat?

Tips for Sending a Message Using TypeScript Websockets

What is the best way to save Vue state in a cookie while transitioning between form steps in a Laravel application

There are a couple of issues here: specifically, the `this.myMethod` function is not recognized as a function, and the click event added by the `addEventListener` function

Secure JSON data by transmitting it safely to the front end within a Node.js environment

How to Use Express.js to Stream Assets (JS/CSS/images) from Amazon S3

Guide to aligning text vertically in a column alongside an image using Bootstrap 5

PHP does not properly interpret quotation marks when passed from an HTML form

Executing a series of tests using Postman

Experiencing unexpected behavior with React Redux in combination with Next.js and NodeJS

What is the best way to invoke my Python function within my JavaScript file?

Manipulating prop values through dropdown selection

To ensure that checkboxes are automatically checked in AngularJS 1.5, the model should be bound to the objects without using the ng-checked

What's the best way to prevent extra spacing when typing in a materialUI TextField?

Determine the highest position of itself by using the calculation: 100% viewport height minus y

Head and tail tally

Tips for transferring form data from controller to connection file

Exploring the functionality of the $.each jQuery iterator. Can someone clarify the distinctions between these two methods?

Utilizing DomQuery in TinyMCE for element retrieval

Cache HTML files in Python