The translation of scroll means scrolling. We can use the related properties of scroll to get the element size and scrolling distance, etc.
Related properties of scroll:
-
element.scrollTop : Returns the distance scrolled up after scrolling, the return value has no unit
-
element.scrollLeft : Returns the distance to the left after scrolling, the return value has no unit
-
element.scrollWidth : Returns the actual width of itself ( including padding, excluding borders )
-
element.scrollHeight : Returns the actual height of itself ( including padding, excluding borders )
We mainly study element.scrollTop and element.scrollHeight here , the other two are the same
One: element.scrollHeight:
Returns the actual height of itself ( including padding, excluding borders ) , the return value is unitless, mainly for the case where the content exceeds the size of the box and overflows, the returned value includes the overflow height
For example the following situation:
At this time, what we use this method to return is no longer the box size of 200, but the height of the overflow part.
<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>
Two: element.scrollTop:
Returns the distance that is rolled up after scrolling. The return value has no unit. The scrolling mentioned here is for the overflow situation. We often add overflow: auto to the style. This is to add a scroll bar to the box, and you can drag it. Move the scroll bar to view the overflowing part, so the value returned at this time is that after dragging the scroll bar, the content moves up relatively, and the return value is the height of the part that moves up.
(But here we also need to add an event: scroll event , that is, dragging the scroll bar will trigger )
<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>It can be seen that in the process of dragging the scroll bar, the event is triggered, and the value of its output element.scrollTop keeps changing, and this value is the height that is dragged above the box
Also note that this is the scrolled height in the element. If you want to get the scrolled height of the page, it should be written as window.pageYOffset