Prevent strona przewijanie podczas przewijania elementu div

Question

już znalazł rozwiązanie w przyjętym odpowiedź tutaj:

How to prevent page scrolling when scrolling a DIV element?

Ale chcemy także, aby wyłączyć przewijanie strony głównej na klawiszach (gdy div zawartość nie może być już przewijane).

Próbuję zrobić coś takiego, ale to nie działa:

$('.div-scroll').bind('keydown mousewheel DOMMouseScroll', function (e) { 
       var e0 = e.originalEvent, 
       delta = e0.wheelDelta || -e0.detail; 

       this.scrollTop += (delta < 0 ? 1 : -1) * 30; 

       if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) { 
        e.preventDefault(); 
       } 
       e.preventDefault(); 
      }); 

Jakieś pomysły dlaczego?

Answer 1

Możesz zatrzymać przewijanie całej strony, wykonując:

Metoda 1

<div onmouseover="document.body.style.overflow='hidden';" onmouseout="document.body.style.overflow='auto';"></div> 

ale to sprawia, że ​​pasek przewijania w przeglądarce znikają gdy po najechaniu na div.

Metoda 2

Else można spojrzeć na jQuery kółka myszy.

var toolbox = $('#toolbox'), 
    height = toolbox.height(), 
    scrollHeight = toolbox.get(0).scrollHeight; 

toolbox.off("mousewheel").on("mousewheel", function (event) { 
    var blockScrolling = this.scrollTop === scrollHeight - height && event.deltaY < 0 || this.scrollTop === 0 && event.deltaY > 0; 
    return !blockScrolling; 
}); 

DEMO

Metoda 3

Aby zapobiec rozprzestrzenianiu się bez wtyczki.

HTML

<div class="Scrollable"> 
    <!-- A bunch of HTML here which will create scrolling --> 
</div> 

JS

$('.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(); 
    } 
}); 

Metoda 4

można to zrobić poprzez anulowanie tych wydarzeń interakcja:

Mouse & przewijania dotykowego i przycisków powiązanych W z przewijaniem.

// left: 37, up: 38, right: 39, down: 40, 
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36 
var keys = {37: 1, 38: 1, 39: 1, 40: 1}; 

function preventDefault(e) { 
    e = e || window.event; 
    if (e.preventDefault) 
     e.preventDefault(); 
    e.returnValue = false; 
} 

function preventDefaultForScrollKeys(e) { 
    if (keys[e.keyCode]) { 
     preventDefault(e); 
     return false; 
    } 
} 

function disableScroll() { 
    if (window.addEventListener) // older FF 
     window.addEventListener('DOMMouseScroll', preventDefault, false); 
    window.onwheel = preventDefault; // modern standard 
    window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE 
    window.ontouchmove = preventDefault; // mobile 
    document.onkeydown = preventDefaultForScrollKeys; 
} 

function enableScroll() { 
    if (window.removeEventListener) 
     window.removeEventListener('DOMMouseScroll', preventDefault, false); 
    window.onmousewheel = document.onmousewheel = null; 
    window.onwheel = null; 
    window.ontouchmove = null; 
    document.onkeydown = null; 
} 

Answer 2

Trzeba powiązać dokument „keyDown” imprezy jak ta:

$(document).bind('keydown', function (e) { ... e.preventDefault(); } 

Answer 3

Ten kod bloku przewijanie za pomocą klawiszy:

$(document).keydown(function(e) { 
     if (e.keyCode === 32 || e.keyCode === 37 || e.keyCode === 38 || e.keyCode === 39 || e.keyCode === 40) { 
      return false; 
     } 
});