首页 > 代码库 > js/jq宽高的理解与运用

js/jq宽高的理解与运用

2024-08-18 02:26:26   220人阅读

document：
1. 与client相关的宽高
document.body.clientWidth
document.body.clientHeight
document.body.clientLeft
document.body.clientTop

2. 与offset相关的宽高

3. 与scroll相关的宽高

网页滚动到顶部或底部：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />
    <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
    <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
    <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
    <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
    <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
    <p>123</p><p>123</p><p>123</p><p>123</p><p>123</p><p>123</p>
    
<script>
function scrollBottomOrTop() {
    var clients = window.innerHeight || document.documentElement.clientHeight
    || document.body.clientHeight;
    var scrollTop = document.body.scrollTop;
    var wholeHeight = document.body.scrollHeight;
    if(clients+scrollTop>=wholeHeight){
        alert(‘我已经滚动到了底部‘);
    }
    if(scrollTop == 0) {
        alert(‘我已经滚动到顶部了‘);
    }
}
window.onscroll = scrollBottomOrTop;
</script>
    
</body>
</html>

 

js/jq宽高的理解与运用


联系
我们