2

Tengo, por ejemplo, un <div> en cierto punto de la página. Lo que quiero es que cuando el scroll esté en la misma posición de ese div me ejecute una función. Por ejemplo:

if(Scroll == div){div.innerHTML="altura es ???'" ;}

Lo intenté hacer con scrollTop pero solo me ejecuta la función cuando el scroll está en el tope y, bueno, yo quiero que me la ejecute cuando ambos se topen por ahí.

Aquí esta mi código:

//asi es como lo se hacer pero no se si este correcto con srollTop
onscroll=function(){ 
    var yScroll=self.pageYOffset || (document.documentElement.scrollTop+document.body.scrollTop); 
    var div = document.getElementById('pp');
if(yScroll == div.scrollTop){div.innerHTML="altura es: "+yScroll;}
} 
 div{
    background:grey;
    font-size:30px;
    padding:5px;
    font-weight:bold;
    width:200px;
    border-radius:5px;

}
<!DOCTYPE html > 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Documento sin título</title> 
</head> 

<body>
<br /> 
<br /> 

<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br />

<!--cando el scroll lleque a este div quiero ejecutar una funcion-->
<div id="pp">0</div>  
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
  
</body> 
</html>  

5
  • creo que esta respuesta te puede resultar útil introducir la descripción del enlace aquí Commented el 8 jun. 2018 a las 16:47
  • le echare un vistaso gracias amigo
    – andy gibbs
    Commented el 8 jun. 2018 a las 16:51
  • En IE hay que hacer unos cuantos cálculos si hay márgenes, paddings y elementos anidados así que por lo general se usa jQuery como en el enlace que menciona @ChaosPattern . Si tenés que soportar IE y evitar jQuery complementa con este otro enlace youmightnotneedjquery.com/#offset como calcular los top y los offset Commented el 8 jun. 2018 a las 17:03
  • me puedes aclarar que es IE exactamente escusame por la ignorancia estoy viendo la documentacion
    – andy gibbs
    Commented el 8 jun. 2018 a las 17:05
  • Internet Explorer, es el navegador pre windows 10 de microsoft, bastante usado pues viene/venía con el sistema operativo. De a poco va cayendo en desuso (a partir de win10 Edge es el navegador preinstalado) pero dependerá a que navegantes apuntes tu web si hay que darles soporte o no. Commented el 8 jun. 2018 a las 17:40

2 respuestas 2

2

La propiedad Element.scrollTop te indica la posición del scroll de un elemento relativo a su interior, no al navegador, por lo que lo mejor es calcular la altura del elemento directamente por su posición absoluta.

Para calcular la posición absoluta (relativa a la ventana que estamos viendo) de cualquier elemento del DOM podemos hacer uso de Element.getBoundingClientRect().top, devolviéndonos un DOMRect que nos proporciona todos los datos necesarios:

Representación de un DOMRect

Un ejemplo de uso podría ser:

// Generamos la función que será llamada en cada evento de scroll
window.onscroll = () => {
  /* Obtenemos la posición absoluta del elemento en cuestión */
  var div = document.getElementById('pp');
  var yPos = div.getBoundingClientRect().top;
  /* Si está cerca del borde superior (pondremos un margen de 20px) mostramos el texto */
  if (Math.abs(yPos) < 20) {
    div.innerHTML = "Altura es: " + yPos;
  }
}
div {
    background: grey;
    font-size: 30px;
    padding: px;
    font-weight: bold;
    width: 200px;
    border-radius: 5px;
}
p {
  height: 100px;
  border: 1px solid red;
}
p:before {
  content: "Hacer scroll";
}
<p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p>

<!-- cuando el scroll llegue a este div quiero ejecutar una función -->
<div id="pp">Aún nada...</div>

<p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p><p>.</p>

1
  • 1
    Que genial gracias amigo!
    – andy gibbs
    Commented el 14 jul. 2019 a las 2:52
0

puedes usar el

$("#div").scrollTop();

para saber la posicion

puedes poner en el body esto

onscroll="myFunction()

y estar preguntando constantemente por la posicion del scroll y si es igual a la de tu div ahi hacer la accion

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.