scroll系列

時間 2019-11-14

標籤 scroll 系列简体版

原文原文鏈接

監聽滾動條css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scroll系列</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        body{
            width: 2000px;
            height: 2000px;
        }
    </style>
</head>
<body>

    <div id="box1" style="width: 100%; height: 200px; background-color: seagreen";></div>
    <div id="box2" style="width: 100%; height: 200px; background-color: salmon";></div>
    <div id="box3" style="width: 100%; height: 200px; background-color: seashell";></div>
    <div id="box4" style="width: 100%; height: 200px; background-color: skyblue";></div>
    <div id="scroll" style="width: 200px;height: 200px;overflow: auto">
        <p>scroll系列監聽瀏覽器滾動事件</p>
        <p>scroll系列監聽瀏覽器滾動事件</p>
        <p>scroll系列監聽瀏覽器滾動事件</p>
        <p>scroll系列監聽瀏覽器滾動事件</p>
        <p>scroll系列監聽瀏覽器滾動事件</p>
        <p>scroll系列監聽瀏覽器滾動事件</p>
        <p>scroll系列監聽瀏覽器滾動事件</p>
        <p>scroll系列監聽瀏覽器滾動事件</p>
        <p>scroll系列監聽瀏覽器滾動事件</p>
    </div>
</body>
<script type="text/javascript">
    window.onload=function () {
        //實時監聽滾動事件
        window.onscroll=function () {
            console.log(document.documentElement.scrollTop);//上下滾動的值
            console.log(document.documentElement.scrollLeft);//左右滾動的值
        };
        //監聽div滾動事件
        var scroll=document.getElementById("scroll");
        scroll.onscroll=function (ev) {
            scroll.scrollTop;//對象上下滾動距離
            scroll.scrollLeft;//對象左右滾動距離
            scroll.scrollWidth;//對象盒子寬度，包含padding值,不包含邊框
            scroll.scrollHeight;//對象盒子高度，包含padding值,不包含邊框
        }
    }
</script>
</html>

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。