Как временно отключить прокрутку?

Question

Я использую плагин scrollTo для jQuery и хочу узнать, возможно ли временно отключить прокрутку окна через JavaScript. Причина, по которой я хочу отключить прокрутку, заключается в том, что когда вы прокручиваете страницу во время анимации scrollTo, это выглядит довольно некрасиво 😉

Конечно, я мог бы воспользоваться $("body").css("overflow", "hidden");, а затем вернуть значение обратно на auto, когда анимация завершится, но было бы лучше, если бы ползунок прокрутки оставался видимым, но неактивным. Как это реализовать?

Answer 1

Вы можете просто добавить класс к тегу <body>, чтобы остановить прокрутку:

.stop-scrolling {
  height: 100%;
  overflow: hidden;
}

Добавьте этот класс, а затем удалите его, когда захотите снова включить прокрутку. Это решение протестировано в Internet Explorer, Firefox, Safari и Chrome.

$('body').addClass('stop-scrolling');

Не забудьте удалить класс, когда прокрутка должна быть снова включена:

$('body').removeClass('stop-scrolling');

Answer 2

Вот очень простой способ сделать это:

window.onscroll = function () { window.scrollTo(0, 0); };

Этот метод может показаться немного "прыгающим" в IE6.

Answer 3

Решение, которое вы привели, является базовым, но написано на чистом JavaScript, без использования jQuery. Вот его объяснение:

function disableScrolling(){
    var x = window.scrollX; // Сохраняем текущую позицию прокрутки по оси X
    var y = window.scrollY; // Сохраняем текущую позицию прокрутки по оси Y
    window.onscroll = function() {
        window.scrollTo(x, y); // При прокрутке возвращаем обратно на сохраненные координаты
    };
}

function enableScrolling(){
    window.onscroll = function() {}; // Отключаем обработчик события прокрутки
}

Когда вы вызываете disableScrolling(), текущая позиция прокрутки сохраняется, и при любом движении прокрутки страница будет возвращаться к этой позиции. Чтобы вновь разрешить прокрутку, просто вызовите enableScrolling(), что отключит обработку события прокрутки.

Такое решение удобно, если вы хотите временно заблокировать прокрутку на странице.

Answer 4

Извините, что отвечаю на старый пост, но я искал решение и натолкнулся на этот вопрос.

Существует множество обходных путей для отображения ползунка прокрутки, например, можно задать контейнеру высоту 100% и стиль overflow-y: scroll.

В моем случае я просто создал элемент div с ползунком прокрутки, который отображаю, добавляя overflow: hidden к тегу body:

function disableScroll() {
    document.getElementById('scrollbar').style.display = 'block';
    document.body.style.overflow = 'hidden';
}

Элемент с ползунком прокрутки должен иметь такие стили:

overflow-y: scroll; top: 0; right: 0; display: none; height: 100%; position: fixed;

Это демонстрирует серый ползунок прокрутки. Надеюсь, это поможет будущим посетителям.

Answer 5

Ваш код содержит функцию, которая отключает прокрутку окна и возвращает его в то состояние, в котором оно находилось до отключения. Давайте разберем его подробнее.

Переменные winX и winY инициализируются значениями null. Эти переменные будут хранить координаты прокрутки окна (по оси X и Y), когда прокрутка будет отключена.
Вы добавили обработчик события прокрутки, который проверяет, были ли сохранены координаты (winX и winY). Если они не равны null, то окно будет прокручено обратно на сохраненные координаты.
Функция disableWindowScroll сохраняет текущие координаты прокрутки окна в winX и winY, тем самым отключая прокрутку путем запоминания текущего положения.
Функция enableWindowScroll сбрасывает координаты прокрутки в null, что позволяет обработчику события снова реагировать на прокрутку.

Таким образом, в результате работы данного кода, когда вы вызовете disableWindowScroll(), прокрутка окна будет заблокирована до тех пор, пока не будет вызвана enableWindowScroll(). Это может быть полезно, если вы хотите предотвратить прокрутку при выполнении определенных операций на странице.

Если у вас есть дополнительные вопросы или вам нужна помощь с улучшением кода, не стесняйтесь обращаться!

Как временно отключить прокрутку?

5 ответ(ов)

Руководство по Markdown

Форматирование текста

Код

Списки

Поддерживаемые языки программирования

Популярные

Другие .NET

Базы данных