• 浏览器滚动条卷去的高度


    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{
                 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>
  • 相关阅读:
    利用docker搭建rtmp服务器(1)
    ES6转换为ES5
    一些乱七八糟的东西
    xss攻击和sq注入
    python asyncio笔记
    图解密码技术一些笔记
    做网页前端遇到的一些问题
    错误处理的一些想法
    吐槽下国内的云笔记
    python的编码问题
  • 原文地址:https://www.cnblogs.com/zzzzzzzsy/p/6746319.html
Copyright © 2020-2023  润新知