Foros del Web » Programando para Internet » Javascript »

hacer scroll en pagina

Estas en el tema de hacer scroll en pagina en el foro de Javascript en Foros del Web. Hola que tal he visto en algunas paginas un efecto de scroll el cual solo con bajar la ruedita del mouse un poco la pagina ...
  #1 (permalink)  
Antiguo 28/10/2018, 18:39
 
Fecha de Ingreso: junio-2013
Mensajes: 20
Antigüedad: 5 años, 6 meses
Puntos: 0
hacer scroll en pagina

Hola que tal he visto en algunas paginas un efecto de scroll el cual solo con bajar la ruedita del mouse un poco la pagina se acomoda en la siguiente sección de esta misma y así va sucesivamente sea hacia arriba o hacia abajo, no se si me explico bien
he visto como se hace haciendo clic en un enlace y este se posiciona en algún lugar de la pagina incluso añadiéndole la función animate() para que la transición sea mas lenta pero no quiero dar clic sino simplemente con la rueda del mouse
Quisiera saber mas o menos como se llama este efecto para poder hacerlo
gracias de antemano
saludos...
  #2 (permalink)  
Antiguo 28/10/2018, 19:31
Avatar de alvaro_trewhela  
Fecha de Ingreso: octubre-2012
Ubicación: localhost
Mensajes: 933
Antigüedad: 6 años, 1 mes
Puntos: 106
Respuesta: hacer scroll en pagina

Puedes obtener el scrollY y el height de window, y las coords de c/elemento y si el scrollY+height del window es mayor o igual al elemento.y muestras:


entonces haces esto

Código Javascript:
Ver original
  1. window.onscroll=function(){
  2. var items = [/*put your elems here*/]; //put your items to show when is vissible
  3.     for(var k=0;k<items.length;k++){
  4.         if(window.scrollY+window.innerHeight >= getOffset(items[k]).y){
  5.         //do something to display the items[k]
  6.         }
  7.     }
  8. }
  9.  
  10. function getOffset(el) { //function that get xy of the the element el
  11. var r = el.getBoundingClientRect();
  12. return { x: r.left + window.scrollX, y: r.top};
  13. }

No se que tanto sirve no lo probé



La zona horaria es GMT -6. Ahora son las 14:11.