Я столкнулся с проблемой, когда страница прокручивается вверх, всякий раз, когда я добавляю свой класс .noscroll
в тело. Таким образом, полоса прокрутки все еще видна, но отображается серым цветом всякий раз, когда появляется оверлей.
Я знаю, что это функция addClass(), которая является причиной этого, потому что, когда я прокомментирую эту строку, она не прокручивается вверху, когда появляется мой оверлей.
JQuery
$('a').click(function(e) {
//reset default anchor behavior
e.preventDefault();
//add noscroll class to body
$("body").addClass("noscroll");
//open overlay box
openOverlayBox();
});
Функция openOverlayBox()
представляет собой просто полный набросок экрана браузера с черным оттенком.
CSS
body.noscroll{
position: fixed;
width: 100%;
overflow-y: scroll;
}
Тело HTML
<a href="#">Test</a>
Как заставить положение прокрутки оставаться неизменным после того, как класс .noscroll
был добавлен в тело?
РЕДАКТИРОВАТЬ 1: Я пытаюсь добиться того же, что и на Facebook. Если вы просматриваете изображение или видео, появляется оверлей, полоса прокрутки выделена серым цветом, но положение прокрутки сохраняется.
EDIT 2: Я нашел очень близкое решение к моей проблеме, но единственное, что это не делает серой полосу прокрутки, но просто удаляет его. Кроме того, когда контент центрируется посередине, он все же делает контент немного чуть-чуть направо, потому что полоса прокрутки из тела скрыта.
РЕДАКТИРОВАТЬ 3: После ответа Куберто и некоторых исследований о себе я узнал, что нужно сделать, чтобы заставить его работать, я хочу. Однако я не знаю, как я начну это делать. Но это то, что должно его решить. Я, открывая оверлей, должен установить мой главный div на position: fixed
и отрицательное верхнее значение положения прокрутки. При выходе из оверлея атрибут position: fixed;
и top
должен быть удален и та же позиция прокрутки, что и при открытии оверлея.