JQuery или Javascript - как отключить прокрутку окна без переполнения: hidden;

Привет, можно ли отключить прокрутку окна, не используя overflow:hidden;, когда я нахожу элемент?

Я попробовал:

$('.chat-content').on('mouseenter',function(){
    $(document).scroll(function(e){
        if(!$(e).hasClass('.chat-content'))
        e.stopPropagation();
        e.preventDefault();
    });
});

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

Так отключите прокрутку для тела, но не для элемента i, без использования css

вот еще одна попытка, которую я сделал: http://jsfiddle.net/SHwGL/

Ответы

Ответ 1

Попробуйте обработать "mousewheel" событие на всех узлах, кроме одного

$('body').on({
    'mousewheel': function(e) {
        if (e.target.id == 'el') return;
        e.preventDefault();
        e.stopPropagation();
    }
})

Демо: http://jsfiddle.net/DHz77/1/

Ответ 2

Если вы хотите прокрутить элемент, который вы закончили, и предотвратить прокрутку окна, здесь действительно полезная функция:

$('.Scrollable').on('DOMMouseScroll mousewheel', function(ev) {
    var $this = $(this),
        scrollTop = this.scrollTop,
        scrollHeight = this.scrollHeight,
        height = $this.height(),
        delta = (ev.type == 'DOMMouseScroll' ?
            ev.originalEvent.detail * -40 :
            ev.originalEvent.wheelDelta),
        up = delta > 0;

    var prevent = function() {
        ev.stopPropagation();
        ev.preventDefault();
        ev.returnValue = false;
        return false;
    }

    if (!up && -delta > scrollHeight - height - scrollTop) {
        // Scrolling down, but this will take us past the bottom.
        $this.scrollTop(scrollHeight);

        return prevent();
    } else if (up && delta > scrollTop) {
        // Scrolling up, but this will take us past the top.
        $this.scrollTop(0);
        return prevent();
    }
});

Применить класс "Прокручиваемый" к вашему элементу и его!

Ответ 3

Следуя идее Гленса, здесь идет другая возможность. Это позволит вам прокручивать внутри div, но не позволит телу прокручиваться вместе с ним, когда заканчивается прокрутка div. Тем не менее, кажется, что накопилось слишком много preventDefault, если вы слишком много прокручиваете, а затем создает задержку, если вы хотите прокручивать вверх. У кого-нибудь есть предложение исправить это?

    $(".scrollInsideThisDiv").bind("mouseover",function(){
       var bodyTop = document.body.scrollTop;
       $('body').on({
           'mousewheel': function(e) {
           if (document.body.scrollTop == bodyTop) return;
           e.preventDefault();
           e.stopPropagation();
           }
       });
    });
    $(".scrollInsideThisDiv").bind("mouseleave",function(){
          $('body').unbind("mousewheel");
    });

Ответ 4

tfe ответил на этот вопрос в другом сообщении в StackOverflow: Отвечено

Другим методом было бы использовать:

$(document).bind("touchmove",function(event){
  event.preventDefault();
});

Но это может помешать некоторым функциям мобильных jQuery работать должным образом.

Ответ 5

Без внешних переменных:

       $('.element').bind('mousewheel', function(e, d) {
            if((this.scrollTop === (this.scrollHeight - this.offsetHeight) && d < 0)
                || (this.scrollTop === 0 && d > 0)) {
                e.preventDefault();
            }
        });

Ответ 6

Исправлено 'решение CSS (например, Facebook):

body_temp = $("<div class='body_temp' />")
    .append($('body').contents())
    .css('position', 'fixed')
    .css('top', "-" + scrolltop + 'px')
    .width($(window).width())
    .appendTo('body');

для переключения в нормальное состояние:

var scrolltop = Math.abs($('.body_temp').position().top);
$('body').append($('.body_temp').contents()).scrollTop(scrolltop);

Ответ 7

Много хороших идей по этой теме. У меня много всплывающих окон на моей странице для обработки ввода пользователем. То, что я использую, представляет собой комбинацию отключения колесика мыши и скрытия полосы прокрутки:

this.disableScrollFn= function(e) { 
    e.preventDefault(); e.stopPropagation() 
};
document.body.style.overflow = 'hidden';
$('body').on('mousewheel', this.disableScrollFn);

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

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

document.body.style.overflow = 'auto';
$('body').off('mousewheel', this.disableScrollFn);

Обратите внимание: я сохраняю ссылку на мой disableScrollFn на существующий объект (в моем случае PopupViewModel), потому что это срабатывает при закрытии всплывающего окна, чтобы иметь доступ к отключениюScrollFn.

Ответ 8

Вы можете использовать jquery-disablescroll для решения проблемы:

Отключить прокрутку: $window.disablescroll();
Включить прокрутку снова: $window.disablescroll("undo");

Поддерживает handleWheel, handleScrollbar, handleKeys и scrollEventKeys.