Arresta la pagina dallo scorrimento se si passa con il passaggio del mouse

Question

Ho un div che è scorrevole, ma ogni volta che raggiungi la parte inferiore/superiore di esso, inizia a scorrere l'intera pagina. Ciò potrebbe essere fastidioso per gli utenti che scorrono velocemente e quindi l'intera pagina inizia a scorrere in modo imprevisto.

Ho bisogno di qualcosa in cui se si passa con il mouse sopra il div, la pagina non è scorrevole.

Ho provato questo con l'aggiunta di CSS quando mi passa il div ...

body { 
    overflow:hidden; 
} 

... Funziona, ma c'è un problema. La barra di scorrimento scompare e sembra stupida vederla scomparire/riapparire. Un modo per ottenere lo stesso effetto ma mantenere la barra di scorrimento visibile? L'ho visto fare con la chat di Facebook.

Answer 1

Ecco un modo molto semplice per fermare la propagazione senza plugin, solo jQuery.

Aggiornamento: il codice è stato aggiornato per funzionare correttamente in IE9 +. Non sono stati testati nelle versioni precedenti.

Per prima cosa, crea un corso sul tuo <div> per contrassegnarlo con questo comportamento. Nel mio esempio, utilizzo la classe .Scrollable.

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

La jQuery per disabilitare è:

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

In sostanza, ciò che fa è da rilevare che la direzione di scorrimento viene richiesto in (basato sul originalEvent.wheelDelta: positivo = up, negativo = down). Se il delta richiesto dell'evento mousewheel si sposta con lo scorrimento oltre lo top o bottom dello <div>, annullare l'evento.

In IE, in particolare, gli eventi di scorrimento che passano accanto all'area di scorrimento di un elemento figlio si arrotolano agli elementi padre e lo scorrimento continua indipendentemente dall'evento annullato. Poiché in ogni caso annulliamo l'evento e quindi controlliamo lo scorrimento sul bambino tramite jQuery, ciò viene impedito.

Questo è liberamente basato sul modo in cui this question risolve il problema, ma non richiede il plug-in ed è compatibile con browser cross-IE9 +.

Here is a working jsFiddle dimostrazione del codice in azione.

Here is a working jsFiddle dimostrazione del codice in azione e aggiornato per funzionare con IE.

Here is a working jsFiddle dimostrazione del codice in azione e aggiornamento per funzionare con IE e FireFox. Vedere this post per ulteriori dettagli sulla necessità delle modifiche.

Answer 2

forse uno sguardo al

How to disable scrolling temporarily?

Questo è un esempio di fermarsi e di attivazione di scorrimento