Как временно отключить прокрутку? - PullRequest
396 голосов
/ 22 января 2011

Я использую плагин scrollTo jQuery и хотел бы знать, возможно ли как-то временно отключить прокрутку элемента окна через Javascript?Причина, по которой я хотел бы отключить прокрутку, состоит в том, что когда вы прокручиваете, когда scrollTo анимирует, это становится действительно уродливым;)

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

Ответы [ 33 ]

3 голосов
/ 05 марта 2016

Я использую showModalDialog , для отображения дополнительной страницы в качестве модального диалога.

чтобы скрыть полосы прокрутки главного окна:

document.body.style.overflow = "hidden";

и при закрытии модального диалога с полосами прокрутки главного окна:

document.body.style.overflow = "scroll";

для доступа к элементам в главном окне из диалогового окна:

parent.document.getElementById('dialog-close').click();

только для тех, кто ищет showModalDialog :( после строки 29 исходного кода)

document.getElementById('dialog-body').contentWindow.dialogArguments = arg;
document.body.style.overflow = "hidden";//****
document.getElementById('dialog-close').addEventListener('click', function(e) {
    e.preventDefault();
    document.body.style.overflow = "scroll";//****
    dialog.close();
});
3 голосов
/ 23 апреля 2013

Как насчет этого?(Если вы используете jQuery)

var $window = $(window);
var $body = $(window.document.body);

window.onscroll = function() {
    var overlay = $body.children(".ui-widget-overlay").first();

    // Check if the overlay is visible and restore the previous scroll state
    if (overlay.is(":visible")) {
        var scrollPos = $body.data("scroll-pos") || { x: 0, y: 0 };
        window.scrollTo(scrollPos.x, scrollPos.y);
    }
    else {
        // Just store the scroll state
        $body.data("scroll-pos", { x: $window.scrollLeft(), y: $window.scrollTop() });
    }
};
3 голосов
/ 15 августа 2013

В зависимости от того, чего вы хотите добиться с помощью удаленной прокрутки, вы можете просто исправить элемент, с которого вы хотите удалить прокрутку (по щелчку или любой другой триггер, который вы хотите временно отключить прокрутку)

Я искал решение для "временного отсутствия прокрутки", и для моих нужд это решило

сделать класс

.fixed{
    position: fixed;
}

затем с Jquery

var someTrigger = $('#trigger'); //a trigger button
var contentContainer = $('#content'); //element I want to temporarily remove scroll from

contentContainer.addClass('notfixed'); //make sure that the element has the "notfixed" class

//Something to trigger the fixed positioning. In this case we chose a button.
someTrigger.on('click', function(){

    if(contentContainer.hasClass('notfixed')){
        contentContainer.removeClass('notfixed').addClass('fixed');

    }else if(contentContainer.hasClass('fixed')){
        contentContainer.removeClass('fixed').addClass('notfixed');
    };
});

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

ПРИМЕЧАНИЕ!В зависимости от размещения вашего элемента «contentContainer» вам может потребоваться настроить его слева.Что можно легко сделать, добавив левое значение CSS к этому элементу, когда активен фиксированный класс

contentContainer.css({
    'left': $(window).width() - contentContainer.width()/2 //This would result in a value that is the windows entire width minus the element we want to "center" divided by two (since it's only pushed from one side)
});
2 голосов
/ 26 февраля 2019

Нет, я бы не стал заниматься обработкой событий, потому что:

  • не все события гарантированно достигают тела,

  • выделение текста и перемещение вниз фактически прокручивает документ,

  • если на этапе события отсоединение происходит неправильно, вы обречены.

Я укусил это, выполнив действие копирования-вставки со скрытой текстовой областью, и угадайте, что прокручивает страницу всякий раз, когда я делаю копию, потому что внутренне я должен выбрать текстовую область, прежде чем позвонить document.execCommand('copy').

Во всяком случае, так я и поступаю, обратите внимание на setTimeout():

document.body.setAttribute('style','overflow:hidden;');
// do your thing...
setTimeout(function(){document.body.setAttribute('style','overflow:visible;');}, 500);

Мигает импульс, поскольку полосы прокрутки на мгновение исчезают, но это приемлемо, я думаю.

2 голосов
/ 10 июня 2016

Отмена события, как в принятом ответе, на мой взгляд, ужасный метод: /

Вместо этого я использовал position: fixed; top: -scrollTop(); ниже.

Демо: https://jsfiddle.net/w9w9hthy/5/

Из моего всплывающего проекта jQuery: https://github.com/seahorsepip/jPopup

//Freeze page content scrolling
function freeze() {
    if($("html").css("position") != "fixed") {
        var top = $("html").scrollTop() ? $("html").scrollTop() : $("body").scrollTop();
        if(window.innerWidth > $("html").width()) {
            $("html").css("overflow-y", "scroll");
        }
        $("html").css({"width": "100%", "height": "100%", "position": "fixed", "top": -top});
    }
}

//Unfreeze page content scrolling
function unfreeze() {
    if($("html").css("position") == "fixed") {
        $("html").css("position", "static");
        $("html, body").scrollTop(-parseInt($("html").css("top")));
        $("html").css({"position": "", "width": "", "height": "", "top": "", "overflow-y": ""});
    }
}

Этот код учитывает проблемы ширины, высоты, полосы прокрутки и скачка страницы.

Возможные проблемы, решенные с помощью вышеуказанного кода:

  • ширина, когда фиксированная позиция установки, ширина html-элемента может быть меньше 100%
  • высота, такая же как выше
  • полоса прокрутки, когда фиксированное положение позиции у содержимого страницы больше нет полосы прокрутки, даже если раньше была полоса прокрутки, что приводило к горизонтальному скачку страницы
  • pagejump, когда фиксированное положение позиции, scrollTop больше не действует, что приводит к вертикальному скачку страницы

Если у кого-то есть какие-либо улучшения в коде замораживания / разморозки вышеупомянутой страницы, дайте мне знать, чтобы я мог добавить эти улучшения в свой проект.

1 голос
/ 02 октября 2014

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

Моя проблемабыл очень похож, почти идентичен, единственное отличие в том, что мне не нужно было показывать полосу прокрутки - я просто должен был убедиться, что ее ширина будет по-прежнему использоваться, поэтому ширина страницы не изменится, пока отображается мое наложение.

Когда я начинаю вставлять мой оверлей в экран, я делаю:

$('body').addClass('stop-scrolling').css('margin-right', 8);

и после того, как я делаю мой оверлей с экрана, я делаю:

$('body').removeClass('stop-scrolling').css('margin-right', 0);

ВАЖНО: это работает отлично, потому что мое наложение позиционируется absolute, right: 0px, когда visible.

1 голос
/ 07 марта 2018

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

<button onClick="noscroll()" style="position:fixed; padding: 8px 16px;">Disable/Enable scroll</button>
<script>
var noscroll_var;
function noscroll(){
  if(noscroll_var){
    document.getElementsByTagName("html")[0].style.overflowY = "";
    document.body.style.paddingRight = "0";
    noscroll_var = false
  }else{
    document.getElementsByTagName("html")[0].setAttribute('style', 'overflow-y: hidden !important');
    document.body.style.paddingRight = "17px";
    noscroll_var = true
  }
}/*noscroll()*/
</script>

<!-- Just to fill the page -->
<script>
  for(var i=0; i <= 80; i++){
    document.write(i + "<hr>")
  }
</script>

Я положил 17px отступа вправо, чтобы компенсировать исчезновение полосы прокрутки. Но это также проблематично, в основном для мобильных браузеров. Решается путем получения ширины стержня в соответствии с this .

Все вместе в этом загоне.

1 голос
/ 21 февраля 2018

Самый простой метод:

$("body").css("overflow", "hidden"); // Remove the scroll bar temporarily

Чтобы отменить это:

$("body").css("overflow", "auto");

Простота реализации, но единственным недостатком является:

  • Страница немного переместится влево, если она выровнена по центру (по горизонтали).

Это связано с удалением полосы прокрутки и расширением области просмотра.

1 голос
/ 18 декабря 2017

У меня та же проблема, ниже описан способ ее решения.

/* file.js */
var body = document.getElementsByTagName('body')[0];
//if window dont scroll
body.classList.add("no-scroll");
//if window scroll
body.classList.remove("no-scroll");

/* file.css */
.no-scroll{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

надеюсь, что это поможет.

1 голос
/ 13 августа 2017

Опираясь на ответ Шайенна Форбса, который я нашел здесь через fcalderan: Просто отключить прокрутку, а не скрыть ее? и исправить проблему исчезновения полосы прокрутки в Hallodom

CSS:

.preventscroll{
    position: fixed;
    overflow-y:scroll;
}

JS:

whatever.onclick = function(){
    $('body').addClass('preventscroll');
}
whatevertoclose.onclick = function(){
    $('body').removeClass('preventscroll');
}

Этот код поднимает вас наверх страницы, но я думаю, что код fcalderan имеет обходной путь.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...