Отключить прокрутку, но сохранить прокрутку CSS

Question

Я не могу найти решение этого вопроса, здесь был вопрос, но ответы не очень полезны (по крайней мере, для меня).

У меня есть модальное всплывающее окно JavaScript, которое отключает все на заднем плане, размещая прозрачный div над страницей. Он также отключает прокрутку, устанавливая переполнение в скрытое и должен делать это, потому что страница прокручивается с помощью колеса мыши в противном случае и отвлекает пользователя.

Проблема заключается в том, что при скрытии и показе полосы прокрутки страница изменяется, а эффект уродливый. Кроме того, моя страница спроектирована таким образом, что если я остановлю ее от изменения размера, это тоже будет уродливо.

Я хочу отключить полосу прокрутки, но сохранить ее видимой (содержимое страницы больше, чем на экране). Это как-то возможно в CSS?

Answer 1

Вместо изменения css, который удалит scrollbar, и, как вы сказали, измените расположение страницы, попробуйте вместо этого позвонить jquery function.

// call your pop up and inside that function add below 
$('body').on('scroll mousewheel touchmove', function(e) { 
     e.preventDefault(); 
     e.stopPropagation(); 
     return false; 
}); 

тогда, когда вы закрываете модальный, вызовите ту же функцию, но заменить on с off

Answer 2

Как только вы начнете показывать свое всплывающее окно, дайте body класс (например, popupOpen). Это должно быть простым решением.

.popupOpen { 
    overflow: hidden; 
    margin-right: 17px //size of the scrollbar in each browser 
} 

Когда вы закроете всплывающее окно, просто удалить класс из body.