scrollTop、scrollLeft的用法

Posted on 2015-12-28 Edited on 2023-11-24 In jQuery , DOM Views: Disqus:

一、以 jQuery 方法實現

scrollTop方法有分有給值的.scrollTop(value)與無給值的.scrollTop()，

先說無給值的.scrollTop()用法，其將會回傳該區域內容的y軸被偏移量，

而.scrollLeft()用法幾乎相等，其將會回傳該區域內容的x軸被偏移量，

以下範例可以自己用$("#myDIV").scrollTop(300);操作看看。

$("#myDIV").scrollTop(300);其意思為在#myDIV有限的寬高下，

將子層的內容往下移300距離。

<!DOCTYPE html>
<html>
<head>
    <style>
        #myDIV {
            height: 250px;
            width: 250px;
            overflow: auto;
        }

        #content {
            height: 800px;
            width: 2000px;
            background-color: coral;
        }
    </style>
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
</head>
<body>
    <div id="myDIV" onscroll="myFunction()">
        <div id="content">Scroll inside me!</div>
    </div>
    <p id="demo"></p>
    <script>
        function myFunction() {
            var elmnt = document.getElementById("myDIV");
            var x = elmnt.scrollLeft;
            var y = elmnt.scrollTop;
            document.getElementById("demo").innerHTML = "Horizontally: " + x + "px<br>Vertically: " + y + "px";
        }
    </script>
</body>
</html>

二、DOM 屬性實現

scrollLeft代表x軸被偏移量，scrollTop代表y軸被偏移量

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <style>
        #d1 {
            width: 300px;
            height: 200px;
            border: 1px solid red;
            overflow: scroll;
        }
        .blue {
            color: blue;
        }
        .demo {
            width: 350px;
            height: 250px;
        }
    </style>
</head>
<body>
    <div id="d1" onscroll="myFunction()">
        <p class="demo">fdgfsfrtertdgd</p>
        <p>end</p>
    </div>
    <p id="scrollWidth">scrollWidth</p>
    <p id="scrollHeight" class="blue">scrollHeight</p>
    <p id="offsetWidth">offsetWidth</p>
    <p id="offsetHeight" class="blue">offsetHeight</p>
    <p id="scrollLeft">scrollLeft：0</p>
    <p id="scrollTop" class="blue">scrollTop：0</p>
    <p id="x">x</p>
    <p id="y">y</p>
    <script>
        document.getElementById("scrollWidth").innerText = "scrollWidth：" + document.getElementById("d1").scrollWidth;
        document.getElementById("scrollHeight").innerText = "scrollHeight：" + document.getElementById("d1").scrollHeight;
        document.getElementById("offsetWidth").innerText = "offsetWidth：" + document.getElementById("d1").offsetWidth;
        document.getElementById("offsetHeight").innerText = "offsetHeight：" + document.getElementById("d1").offsetHeight;
        function myFunction() {
            document.getElementById("scrollLeft").innerText = "scrollLeft：" + document.getElementById("d1").scrollLeft;
            document.getElementById("scrollTop").innerText = "scrollTop：" + document.getElementById("d1").scrollTop;
            document.getElementById("x").innerText = "當 " + document.getElementById("d1").offsetWidth + "px(offsetWidth) - 17px(捲軸) - 1px(左border) - 1px(右border) + " + document.getElementById("d1").scrollLeft + "px(scrollLeft) = " + document.getElementById("d1").scrollWidth + "px(scrollWidth) 時，則x捲軸已經拉到底";
            if (document.getElementById("d1").clientWidth + document.getElementById("d1").scrollLeft === document.getElementById("d1").scrollWidth) {
                document.getElementById("x").style.color = "red";
            }
            else {
                document.getElementById("x").style.color = "black";
            }
            document.getElementById("y").innerText = "當 " + document.getElementById("d1").offsetHeight + "px(offsetHeight) - 17px(捲軸) - 1px(上border) - 1px(下border) + " + document.getElementById("d1").scrollTop + "px(scrollTop) = " + document.getElementById("d1").scrollHeight + "px(scrollHeight) 時，則y捲軸已經拉到底";
            if (document.getElementById("d1").clientHeight + document.getElementById("d1").scrollTop === document.getElementById("d1").scrollHeight) {
                document.getElementById("y").style.color = "red";
            }
            else {
                document.getElementById("y").style.color = "blue";
            }
        }
    </script>
</body>
</html>