瀏覽器滾動條卷去的高度


1.之前我們學習的JS盒子模型中:client系列/offset系列/scrollWidth // scrollHeight都是"只讀"屬性->只能通過屬性獲取值,不能通過屬性修改元素 //的樣式 //

2.scrollTop//scrollLeft:滾動條卷去的高度/寬度(這兩個屬性是唯一"可讀寫") // 我們的scrollTop的值是存在邊界值(最大和最小值的),我們設置的值比最小值小或者比最大值大都沒用,起到效果的依然是邊界值 //最小值是零 // box.scrollTop = -1000;//直接回到了容器的頂部,沒有超出 //console.log(box.scrollTop);// 0 //最大值是=真實高度-當前容器一屏幕的高度 //var maxTop=box.scrollHeight-box.clientHeight // console.log(maxTop);

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 200px;
            height: 200px;
            margin: 100px;
            border: 10px solid green;
            overflow: auto ;
        }
    </style>
</head>
<body>
    <div id="box">
        要得到你必須付出,要付出你還要學會堅持,如果你真的覺得很難,那你就放棄,但是你放棄了就不要抱怨,我覺得人生就是這樣,世界真的是平衡的,每個人都是通過自己的努力,去決定自己生活的樣子
        要得到你必須付出,要付出你還要學會堅持,如果你真的覺得很難,那你就放棄,但是你放棄了就不要抱怨,我覺得人生就是這樣,世界真的是平衡的,每個人都是通過自己的努力,去決定自己生活的樣子
        要得到你必須付出,要付出你還要學會堅持,如果你真的覺得很難,那你就放棄,但是你放棄了就不要抱怨,我覺得人生就是這樣,世界真的是平衡的,每個人都是通過自己的努力,去決定自己生活的樣子
    </div>
   <script type="text/javascript">
     var box = document.getElementById("box");
       //1.之前我們學習的JS盒子模型中:client系列/offset系列/scrollWidth
       // scrollHeight都是"只讀"屬性->只能通過屬性獲取值,不能通過屬性修改元素
       //的樣式
       //2.scrollTop//scrollLeft:滾動條卷去的高度/寬度(這兩個屬性是唯一"可讀寫")
        // 我們的scrollTop的值是存在邊界值(最大和最小值的),我們設置的值比最小值小或者比最大值大都沒用,起到效果的依然是邊界值
        //最小值是零
        // box.scrollTop = -1000;//直接回到了容器的頂部,沒有超出
        //console.log(box.scrollTop);// 0
       //最大值是=真實高度-當前容器一屏幕的高度
       //var maxTop=box.scrollHeight-box.clientHeight
       //  console.log(maxTop);
   </script>
</body>
</html>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM