ti-enxame.com

Capturar evento de rolagem no estouro: elemento oculto

Alguma idéia de como capturar um evento de rolagem em um elemento que está excedente: oculto? Eu gostaria de rolar em uma coluna sem mostrar uma barra de rolagem para o usuário.

31
Markus Jönsson

Este é realmente um processo um pouco aprofundado. O que faço é definir sinalizadores globais quando o mouse do usuário entra e sai do elemento que você deseja rolar. Em seguida, no evento roda do mouse do corpo, verifico se o sinalizador MOUSE_OVER é verdadeiro e paro a propagação do evento. Isso ocorre para que o corpo principal não role, caso a página inteira esteja cheia.

Observe que, com o estouro oculto, a capacidade de rolagem padrão é perdida; portanto, você deve criá-lo. Para fazer isso, você pode definir um ouvinte da roda do mouse no seu div em questão e usar a propriedade event.wheelDelta para verificar se o usuário está rolando para cima ou para baixo. Esse valor é diferente de acordo com o navegador, mas geralmente é negativo se estiver rolando para baixo e positivo se estiver rolando para cima. Você pode então mudar a posição do seu div de acordo.

Esse código é hackeado rapidamente, mas seria basicamente parecido com isso ...

var MOUSE_OVER = false;
$('body').bind('mousewheel', function(e){
  if(MOUSE_OVER){
    if(e.preventDefault) { e.preventDefault(); } 
    e.returnValue = false; 
    return false; 
  }
});

$('#myDiv').mouseenter(function(){ MOUSE_OVER=true; });
$('#myDiv').mouseleave(function(){ MOUSE_OVER=false; });

$('#myDiv').bind('mousewheel', function(e){
  var delta = e.wheelDelta;
  if(delta > 0){
    //go up
  }
  else{
    //go down
  }
});
28
anson
$("body").css("overflow", "hidden")

$(document).bind('mousewheel', function(evt) {
    var delta = evt.originalEvent.wheelDelta
    console.log(delta)
})

funciona para mim. adaptado de Como obtenho a propriedade wheelDelta?

2
Neil

Uso overflow: scroll, mas também posiciono absolutamente uma div sobre a barra de rolagem para ocultá-la.

2
maxedison
$("div").on('wheel', function (e) {
        if (e.originalEvent.deltaY < 0) {
        console.log("Scroll up");
    } else {
        console.log("Scroll down");
    }
});

Isso fez o truque para mim. JSFiddle

StackFiddle:

$("div").on('wheel', function(e) {
  if (e.originalEvent.deltaY < 0) {
    console.log("Scroll up");
  } else {
    console.log("Scroll down");
  }
});
div {
  height: 50px;
  width: 300px;
  background-color: black;
  overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div></div>
0
Nebulosar