码迷,mamicode.com
首页 > 其他好文 > 详细

浏览器滚动条卷去的高度

时间:2017-04-21 22:27:37      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:cli   最大和   不能   效果   ons   auto   元素   ext   element   

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>

 

浏览器滚动条卷去的高度

标签:cli   最大和   不能   效果   ons   auto   元素   ext   element   

原文地址:http://www.cnblogs.com/zzzzzzzsy/p/6746319.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!