Wyłączyć przewijanie, ale zachować pasek przewijania CSS

Question

Nie mogę znaleźć rozwiązania, było tu pytanie, ale odpowiedzi nie są zbyt użyteczne (przynajmniej dla mnie).

Mam wyskakujące okno modalne JavaScript, które wyłącza wszystko w tle, umieszczając przezroczysty element div na stronie. Wyłącza także przewijanie, ustawiając przelew na ukryty i musi to zrobić, ponieważ strona jest przewijana kółkiem myszy w inny sposób i rozprasza użytkownika.

Problem polega na tym, że podczas ukrywania i pokazywania paska przewijania zmienia się rozmiar strony, a efekt jest brzydki. Ponadto moja strona jest zaprojektowana w taki sposób, że jeśli ją powstrzymam przed zmianą rozmiaru, byłoby to brzydkie.

Chcę tylko wyłączyć pasek przewijania, ale pozostawić go widocznym (zawartość strony jest dłuższa niż pasuje ekran). Czy jest to jakoś możliwe w CSS?

Answer 1

Zamiast zmieniać css, który usunie scrollbar, i jak powiedział pan zmienić układ strony, spróbuj wywołaniem jquery function zamiast.

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

następnie po zamknięciu modal, nazywają tę samą funkcję, ale zastąpić on z off

Answer 2

Gdy zaczniesz wyświetlać wyskakujące okienko, podaj body klasę (np. popupOpen). To powinno być łatwe do obejścia.

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

Po zamknięciu okienko, po prostu usunąć klasę z body.