Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Joao Paulo M.

Bloquear scroll dentro de uma caixa de texto

Por , em Javascript

Recommended Posts

Joao Paulo M.    0

Joao Paulo M.
Postado

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
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
q
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
6
7
8
9
0
...</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á!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado
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.

ao pé da letra, ficaria assim:

 

	window.onload = function()
{
	var forceWindowScrollY = -1;

	window.onscroll = function(){
		if( forceWindowScrollY != -1 && window.scrollY != forceWindowScrollY )
			window.scrollTop( forceWindowScrollY );
	}
	id('textarea').onmouseover = function(){
		if(forceWindowScrollY == -1)
			forceWindowScrollY = window.scrollTop();
	}
	id('textarea').onmouseout = function(){
		forceWindowScrollY = -1;
	}
}
function id( el ){
	return document.getElementById( el );
}

não testei se funcionou 'muito bem'.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Joao Paulo M.    0

Joao Paulo M.
Postado

William, eu testei seu script no Safari e no Chrome (ambos atualizados) e em nenhum deles funcionou.

 

Eu dei uma lida no script e a lógica parece estar correta, pelo que entendi ele iria ficar retornando o scroll pro top toda hora caso o mouse estivesse sobre a caixa de texto.. mas não está funcionando, o scroll continua descendo direto normalmente.

 

(mas ainda sim, obrigado pela tentativa!)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Francis Schiavo    1

Francis Schiavo
Postado

Existe uma propriedade em CSS que controla o scroll: overflow (hidden=sem scroll, auto=padrão do browser);

Você pode trocar esse estilo no corpo do texto, quando o mouse estiver na caixa de texto deixe hidden, quando sair troque para auto.

Usando os eventos onmouseover e onmouseout é possível saber quando o mouse entra ou sai da caixa de texto.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito