Nenhuma resposta neste tópico

[Micox]

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

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