Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá, eu gostaria de saber se é possível através de JS bloquear um scroll sob as seguintes condições:
Imagine que você possui um campo de form text dentro de uma página, e esse campo possui um conteúdo maior que o designado para a caixa de texto, aparecendo portando a barra de rolagem dele.
Nesse momento você está com 2 barras de rolagem (a da página principal e a do campo de texto), quando você acionar o scroll do mouse (roda) e o mouse estiver sobre o campo text, ele irá acionar a rolagem do campo text, porém quando essa rolagem atinge o máximo ele passa a rolar a da página.
O que eu gostaria é que, através de algum script, bloquear a rolagem da página sempre que o mouse estiver sob o texto, independente se está no máximo ou não. Acionando a rolagem da página principal apenas quando o mouse estiver fora do campo text.
Se possível, eu gostaria de uma solução compatível com os principais navegadores e sem usar jQuery e coisas do tipo.
Um exemplo de página onde essa situação acontece:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Página de testes</title>
</head>
<body>
<br><br><br><br><br><br><br><br><br><br>
<label for="textarea"></label>
<textarea name="textarea" id="textarea" cols="60" rows="10">teste...</textarea>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>Eu achei esse script, é possível adaptá-lo (sem utilizar jQuery ou algo do tipo) para essa página acima?
// here we store the window scroll position to lock; -1 means unlocked
var forceWindowScrollY = -1;
$(window).scroll(function(event) {
if(forceWindowScrollY != -1 && window.scrollY != forceWindowScrollY) {
$(window).scrollTop(forceWindowScrollY);
}
});
$("#popup").hover(function() {
if(forceWindowScrollY == -1) {
forceWindowScrollY = $(window).scrollTop();
}
}, function() {
forceWindowScrollY = -1;
});Obrigado desde já!
Carregando comentários...