3

Preciso de uma área que ao clicar, impeça o scroll da tela enquanto o cursor está sobre essa área, porém, funcione normal fora dessa área. Eu consegui isso com uma função que deixarei a seguir, mas ao clicar no botão fechar, preciso que a função anterior seja cancelada.

$('#el').click(function(){
    
$(this).on({
    'mousewheel': function(e) {
        e.preventDefault();
        e.stopPropagation();
    }
})

});
body {
    height: 2700px;
}
#el {
    position: relative;
    width: 250px;
    height: 250px;
    background: red;
}
#close {
    position:absolute;
    color:#fff;
    cursor:pointer;
    background:rgba(0,0,0,0.3);
    right:0;
    border:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id='el'>
    <button id='close'>x</button>
</div>

2 Respostas 2

3

Você pode usar is(":visible"), acredito que quando a janela fecha você usa display: none, tente assim:

$('#close').click(function() {
    $('#el').fadeOut();
});

$('#el').click(function() {
    var $this = $(this);
    $this.on({
        'mousewheel': function(e) {
            if ($this.is(":visible")) {
              e.preventDefault();
              e.stopPropagation();
            }
        }
    });
});
body {
    height: 2700px;
}
#el {
    position: relative;
    width: 250px;
    height: 250px;
    background: red;
}
#close {
    position:absolute;
    color:#fff;
    cursor:pointer;
    background:rgba(0,0,0,0.3);
    right:0;
    border:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id='el'>
    <button id='close'>x</button>
</div>

1
  • Apliquei no meu código e funcionou perfeitamente. Muito obrigado Guilherme. 22/04/2015 às 14:16
2

Para fazer um toggle você pode usar uma variável como no exemplo:

var scroll = true; // Define como scrol habilitado

$('#el').click(function(){
   scroll = !scroll; // Ao clicar, troca de true pra false, ou false para true
    
   $(this).on({
      'mousewheel': function(e) {
         if (!scroll){ // Verifica se o scroll está DESABILITADO ou seja FALSE
            e.preventDefault();
            e.stopPropagation();
         }
       }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id='el'>
    <button id='close'>x</button>
</div>

4
  • a intenção era justamente essa de o scroll não rolar exatamente no bloco vermelho apenas, e o resto do documento poder continuar utilizando o scroll, por isso não posso utilizar o documentao invés de this. 22/04/2015 às 13:54
  • Ahh, certo, então a solução do @GuilhermeNascimento pode ajudar, ou então fazer uso da variável que mencionei. ;)
    – KaduAmaral
    22/04/2015 às 13:56
  • Você editou na hora que marquei a outra resposta como certa. A sua também funciona... de qualquer forma obrigado por ajudar. 22/04/2015 às 14:18
  • Tranquilo @MauroAlves, a resposta do GuilhermeNascimento é melhor para aplicar em um ambiente, a minha foi mais uma explicação de como resolver o problema. O importante é que o problema foi solucionado.
    – KaduAmaral
    22/04/2015 às 14:38

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .