为了账号安全,请及时绑定邮箱和手机立即绑定

跟着写的为什么不对那


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

<div class="scrolldiv"></div>

<style type="text/css">

.scrolldiv{

width: 500px;

height: 400px;

margin: 1000px auto 100px auto;

background-color: red;

}

</style>

<script type="text/javascript">

function scrllB(){

var clients=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;

var scrollTop=document.body.scrollTop;

var whHeight=document.body.scrollHeight;

if(clients+scrollTop>=whHeight){

alert("到底部了")

}

if(scrollTop==0){

alert("顶部")

}

}

window.onscroll=scrllB;

</script>

</body>

</html>


正在回答

1 回答

问题原因:打开浏览器F12 查看body元素可以发现,发生了父子元素间垂直外边距合并问题

【父子元素间垂直外边距合并】现象

父元素的上(下)margin会和子元素上(下)发生合并,值为两者之间最大的那个值,且这个值会成为父元素的上(下)margin

【父子元素间垂直外边距合并】触发条件:

父元素木有设置边框(1)或则padding(2),并且子元素前面(3)或则后面(4)都没有另外一个子元素(只要打破1或则2,又或则3和4一起打破,就能防止发生这种现象)

解决办法有两个:

方法一:因为发生了父子元素间垂直外边距合并问题,此时body的scrollHeight不再是整个文档的高度,但html(document.documentElement)的scrollHeight仍然是整个文档的高度,So

var whHeight=document.documentElement.scrollHeight;

方法二:解决父子元素间垂直外边距合并问题,So我们需要修改style

body{margin:0;}
//因为scrollDiv只设置了上外边距,所以这里只需要设置一个before,如果还设置了下边距,可以用:after
body::before{
    content:'';
    display:'table';
}


以上,希望能帮到这位道友

1 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
JS/jQuery宽高的理解和应用
  • 参与学习       34058    人
  • 解答问题       58    个

js/jquery各种宽高的理解,结合实例对宽高做一些简单的应用

进入课程

跟着写的为什么不对那

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信