prevent page scrolling when a modal is open

Dileep Rajapaksha answered on August 4, 2020 Popularity 9/10 Helpfulness 4/10

answer prevent page scrolling when a modal is open

related disable scroll on modal open

related prevent body from scrolling when a modal is opened

prevent page scrolling when a modal is open

Comment

// When the modal is shown, we want a fixed body
document.body.style.position = 'fixed';
document.body.style.top = `-${window.scrollY}px`;

// When the modal is hidden...
const scrollY = document.body.style.top;
document.body.style.position = '';
document.body.style.top = '';
window.scrollTo(0, parseInt(scrollY || '0') * -1);

Popularity 9/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: javascript when

Link to this answer
Share Copy Link

Contributed on Nov 05 2022

Dileep Rajapaksha

0 Answers Avg Quality 2/10

Closely Related Answers

disable scroll on modal open

Comment

// Select required elements from the DOM
const modal = document.querySelector("#modal");
const body = document.querySelector("body");

const showModal = function (e) {
modal.classList.toggle("hidden");

if (!modal.classList.contains("hidden")) {
// Disable scroll
body.style.overflow = "hidden";
} else {
// Enable scroll
body.style.overflow = "auto";
}
};

Popularity 10/10 Helpfulness 5/10 Language javascript

Source: www.geeksforgeeks.org

Tags: disable

Link to this answer
Share Copy Link

Contributed on Mar 12 2022

Nabel Odal

0 Answers Avg Quality 2/10

prevent body from scrolling when a modal is opened

Comment

$('#adminModal').modal().on('shown', function(){
    $('body').css('overflow', 'hidden');
}).on('hidden', function(){
    $('body').css('overflow', 'auto');
})

Popularity 10/10 Helpfulness 4/10 Language whatever

Source: stackoverflow.com

Tags: whatever whateve

Link to this answer
Share Copy Link

Contributed on Aug 04 2020

Perfect Peacock

0 Answers Avg Quality 2/10

prevent page scrolling when a modal is open

Contents

More Related Answers

prevent page scrolling when a modal is open

Closely Related Answers

disable scroll on modal open

prevent body from scrolling when a modal is opened

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.