Pegando a posição de um elemento na tela e do scroll

[micox 2]

Vou postar umas 3 funçõezinhas rápidas pra ajudar a trabalhar visualmente com scroll e posicionamento de elementos na tela.

 

Como quase tudo em javascript, nossos amigos navegadores não ajudam. Ou seja, não é só pegar a documentação, tem toda aquela velha gambiarra pra funcionar em diversos browsers (crossbrowser).

 

Pra minha alegria, lembrei que eu já tinha brincado com isso na época do velho Mwords, daí fui lá atrás das funções e re-adaptei. Mostrar-lhes-ei agora:

 

Os códigos são tão simples que acho que não precisa de explicação detalhada. Só explico que os '?' que tem são para contornar as diferenças entre os navegadores (principalmente IE).

 

Pegando a posição atual do scroll e retornando em um objeto com as propriedades X e Y:

var w=window, d=document;
//pega a posição atual do scroll
mov.getScroll= function(){
return {
	x: (w.pageXOffset ? w.pageXOffset : de.scrollLeft ? de.scrollLeft : d.body.scrollLeft) || 0,		
	y: (w.pageYOffset ? w.pageYOffset : de.scrollTop ? de.scrollTop : d.body.scrollTop) || 0	
};
};
//exemplo de uso
alert('Posição Y do scroll: ' + mov.getScroll().y);

 

Pegando a posição de determinado elemento na tela:

var w=window, d=document;
//pega a posição correta do elemento na tela
mov.objPos = function(obj) {
var curl =0, curt = 0;
if (obj.offsetParent) {
	do {
		curl += obj.offsetLeft;
		curt += obj.offsetTop;
	} while ((obj = obj.offsetParent));
	return {x: curl, y: curt};
}else{
	return {x: obj.offsetLeft, y:obj.offsetTop};
}
};
//exemplo de uso
alert('Posição real do elemento "viva" na tela: ' + mov.objPos(d.getElementById('viva') ) );

 

Fazendo a barra de rolagem se movimentar gradativamente

//variaveis
var micox_mov_height= 50; //de quanto em quanto o scroll se moverá
var micox_mov_fps    = 20; //velocidade que o scroll se moverá
//faz o slide
mov.slide = function(ini,end){
if(!mov.sliding){	
	mov.sliding = true;
	//setando posição inicial
	var atual = mov.getScroll();
	w.scrollTo(atual.x , ini);
	mov.inter = setInterval(function(){
		var novoY, atual = mov.getScroll();
		if(atual.y < end){
			w.scrollTo(atual.x , atual.y + micox_mov_heigth);
		}else{
			mov.sliding = false;
			clearInterval(mov.inter);
		}
	},1000/micox_mov_fps);
}
}

 

Em caso de dúvidas é só me perguntar.

Fonte: Meu blog ElMicox

[Mário Monteiro 179]

Gostei :yes:

 

Obrigado por compartilhar