La traducción de scroll significa desplazamiento. Podemos usar las propiedades relevantes de scroll para obtener el tamaño del elemento y la distancia de desplazamiento, etc.
Propiedades relacionadas del desplazamiento:
-
element.scrollTop : Devuelve la distancia desplazada hacia arriba después de desplazarse, el valor de retorno no tiene unidad
-
element.scrollLeft : Devuelve la distancia a la izquierda después de desplazarse, el valor de retorno no tiene unidad
-
element.scrollWidth : devuelve el ancho real de sí mismo ( incluido el relleno, excluyendo los bordes )
-
element.scrollHeight : Devuelve la altura real de sí mismo ( incluido el relleno, excluyendo los bordes )
Principalmente estudiamos element.scrollTop y element.scrollHeight aquí , los otros dos son iguales
Uno: elemento.scrollHeight:
Devuelve la altura real de sí mismo ( incluido el relleno, excluyendo los bordes ) , el valor de retorno no tiene unidades, principalmente para el caso en que el contenido excede el tamaño del cuadro y se desborda, el valor devuelto incluye la altura de desbordamiento
Por ejemplo la siguiente situación:
En este momento, lo que usamos para devolver este método ya no es el tamaño de la caja de 200, sino la altura de la parte de desbordamiento.
<style>
div{
width: 200px;
height: 200px;
border: 10px solid red;
background-color: rgb(255, 215, 105);
}
</style>
</head>
<body>
<div>我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友</div>
<script>
var div=document.querySelector('div');
console.log(div.scrollHeight);
</script>
</body>
Dos: elemento.scrollTop:
Devuelve la distancia que se acumula después del desplazamiento. El valor devuelto no tiene unidad. El desplazamiento mencionado aquí es para la situación de desbordamiento. A menudo agregamos overflow: auto al estilo. Esto es para agregar una barra de desplazamiento al cuadro, y usted puede arrastrarlo Mueva la barra de desplazamiento para ver la parte desbordada, por lo que el valor devuelto en este momento es que después de arrastrar la barra de desplazamiento, el contenido se mueve hacia arriba relativamente, y el valor de retorno es la altura de la parte que se mueve hacia arriba.
(Pero aquí también necesitamos agregar un evento: evento de desplazamiento , es decir, se activará arrastrando la barra de desplazamiento )
<style>
div{
width: 200px;
height: 200px;
border: 10px solid red;
background-color: rgb(255, 215, 105);
overflow: auto; //滚动条
}
</style>
</head>
<body>
<div>我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友我爱我女朋友</div>
<script>
var div=document.querySelector('div');
div.addEventListener('scroll',function(){ //拖动滚条就会触发事件
console.log(div.scrollTop);
})
</script>
</body>Se puede ver que en el proceso de arrastrar la barra de desplazamiento, se activa el evento y el valor de su elemento de salida.scrollTop sigue cambiando, y este valor es la altura que se arrastra sobre el cuadro
También tenga en cuenta que esta es la altura desplazada del elemento.Si desea obtener la altura desplazada de la página, debe escribir window.pageYOffset