js window.scroll 怎么判断滚动到底部

JavaScript023

js window.scroll 怎么判断滚动到底部,第1张

若要想判断js window.scroll是否滚动到底部,需要用的三个属性值,它们分别是:

scrollTop、clientHeight和scrollHeight;

1、scrollTop为滚动条在Y轴上的滚动距离。

2、clientHeight为内容可视区域的高度。

3、scrollHeight为内容可视区域的高度加上溢出(滚动)的距离。

so,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。

您好!具体代码如下,兼容各浏览器,其中scrollTop 为当前页面到顶部的距离,document.body.offsetHeight为整个页面的高度,document.documentElement.clientHeight为当前屏幕的高度,有不明白的可以问我,希望我的回答能帮到您!

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html charset=utf-8" />

<title> </title>

<style>

body{margin:0height:2000px}

div{height:500pxwidth:500pxbackground:#f00margin:0 auto}

</style>

<script>

window.onscroll=function(){

var scrollTop = document.documentElement.scrollTop||document.body.scrollTop

if(scrollTop>=document.body.offsetHeight-document.documentElement.clientHeight)

{

document.getElementById("div1").style.display="none"

alert("去看看是不是DIV不见了")

}

}

</script>

</head>

<body>

<div id="div1">

this is a div

</div>

</body>

</html>