JQuery отключить прокрутку, когда мышь над абсолютным div

Ответ 1

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

• Amos - установите overflow:hidden на тело. Это просто и отлично работает. Но основные полосы прокрутки окна будут мигать и выходить.
• Amos - Используйте javascript для отключения колеса мыши. Это здорово, если вам вообще не нужна колесико для мыши.
• Этот ответ. Используйте javascript для прокрутки только элемента, над которым вы закончили. Это лучший ответ, если ваш внутренний div должен прокручиваться, но вы не хотите прокручивать другие div. Пример скрипта демонстрирует это.

http://jsfiddle.net/eXQf3/371/

Код работает следующим образом:

• Выделить событие прокрутки текущего элемента
• Отменить событие прокрутки
• Ручная прокрутка только текущего элемента

$('#abs').bind('mousewheel DOMMouseScroll', function(e) {
    var scrollTo = null;

    if (e.type == 'mousewheel') {
        scrollTo = (e.originalEvent.wheelDelta * -1);
    }
    else if (e.type == 'DOMMouseScroll') {
        scrollTo = 40 * e.originalEvent.detail;
    }

    if (scrollTo) {
        e.preventDefault();
        $(this).scrollTop(scrollTo + $(this).scrollTop());
    }
});​

Changelog:

• Поддержка FF
• scrollTo null проверить, чтобы вернуться к поведению по умолчанию, если произойдет что-то непредвиденное
• поддержка jQuery 1.7.

Ответ 2

Вы не можете отключить прокрутку окна, но есть обходное решение:

//set the overflow to hidden to make scrollbars disappear
$('#container').hover(function() {
    $("body").css("overflow","hidden");
}, function() {
     $("body").css("overflow","auto");
});

См. демонстрацию: http://jsfiddle.net/9Htjw/

ОБНОВЛЕНИЕ

Вы можете отключить колесо мыши.

$('#container').hover(function() {
    $(document).bind('mousewheel DOMMouseScroll',function(){ 
        stopWheel(); 
    });
}, function() {
    $(document).unbind('mousewheel DOMMouseScroll');
});


function stopWheel(e){
    if(!e){ /* IE7, IE8, Chrome, Safari */ 
        e = window.event; 
    }
    if(e.preventDefault) { /* Chrome, Safari, Firefox */ 
        e.preventDefault(); 
    } 
    e.returnValue = false; /* IE7, IE8 */
}

Источник: http://solidlystated.com/scripting/javascript-disable-mouse-wheel/

Демо: http://jsfiddle.net/9Htjw/4/

Ответ 3

mrtsherman: если вы привязываете это событие, то код amosrivera работает также и для firefox:

    var elem = document.getElementById ("container");
    if (elem.addEventListener) {    
        elem.addEventListener ("mousewheel", stopWheel, false);
        elem.addEventListener ("DOMMouseScroll", stopWheel, false);
    }
    else {
        if (elem.attachEvent) { 
            elem.attachEvent ("onmousewheel", stopWheel);
        }
    }

Ответ 4

Что я пытаюсь сделать здесь с моим кодом:

• Проверьте, не зависает ли div над телом

• Получить направление прокрутки

• Сравните ScrollTop с высотой контейнера и предотвращайте дальнейшую прокрутку при достижении максимального или минимального значения (до тех пор, пока мышь не исчезнет).

  var hovered_over = false;
  var hovered_control;          
  function onCrtlMouseEnter(crtl) {      //Had same thing used for mutliple controls 
      hovered_over = true;       //could be replaced with $(control).onmouseenter(); etc
      hovered_control = crtl;    //you name it
  }
  function onCrtlMouseLeave(crtl) {
      hovered_over = false;
      hovered_control = null;
  }
  
  $(document).on("mousewheel",function(e)
  {
     if (hovered_over == true) {                            
          var control = $(hovered_control);                 //get control
          var direction = e.originalEvent.wheelDeltaY;      //get direction of scroll
          if (direction < 0) {
              if ((control.scrollHeight - control.clientHeight) == control.scrollTop) {
                  return false;              //reached max downwards scroll... prevent;
              }
          }
          else if (direction > 0) {
              if (control.scrollTop == 0) {
                  return false;              //reached max upwards scroll... prevent;
              }
          }
      }
  });
  

http://jsfiddle.net/Miotonir/4uw0vra5/1/

Вероятно, не самый чистый код, и его можно легко улучшить, но это работает для меня. (control.scrollHeight - control.clientHeight) эта часть сомнительна для меня, но вы должны понять, как подойти к проблеме в любом случае.

Ответ 5

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

Решение: временно отключить nicescroll при зависании элемента

$('body').on('mouseover', '#element', function() {
    $('body, html').css('overflow', 'auto').getNiceScroll().remove();
}).on('mouseout', '#element', function() {
    $('body, html').css('overflow', 'hidden').niceScroll();
});

Ответ 6

@mrtsherman Ответ почти сработал для меня, но с пассивной прокруткой в Chrome произошли серьезные изменения.

preventScrollingEl = document.getElementById("WHATEVER");
preventScrollingEl.addEventListener('mousewheel', preventScrolling, {passive: false});
preventScrollingEl.addEventListener('DOMMouseScroll', preventScrolling, {passive: false});

function preventScrolling(event) {
  var scrollTo = null;

  if (event.type == 'mousewheel') {
    scrollTo = (event.wheelDelta * -1);
  } else if (event.type == 'DOMMouseScroll') {
    scrollTo = 40 * event.detail;
  }

  if (scrollTo) {
    event.preventDefault();
    $(this).scrollTop(scrollTo + $(this).scrollTop());
  }
}