webAPI

scroll家族

2019-05-15  本文已影响0人  椋椋夜色

<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title> scroll家族 </title>

    <!-- scroll家族:
        scrollWidth和scrollHeight
        内容的总宽度和总高度,只能获取不能修改
        
        scrollLeft和scrollTop
        内容往左边滚出去的距离,和内容往上边滚出去的距离
        它也可以设置,设置多少,就滚出去多少,但是如果设置的值超出它本身最大能滚出去的大小,那么也只是滚到最后 -->
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: #f00;
            overflow: auto;
            /* padding-left: 20px; */
        }

        img {
            vertical-align: top;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: #0f0;
        }
    </style>
</head>

<body>
    <input type="button" value="获取宽高" id="btn1" />
    <input type="button" value="获取滚出去距离" id="btn2" />
    <input type="button" value="水平滚动条滚到最右" id="btn3" />
    <input type="button" value="垂直滚动条滚到最下" id="btn4" />
    <div class="box">
        <img src="../images/01.jpg" alt="" />
        <!-- <div class="son"></div> -->
    </div>
    <script>
        // 找到元素
        var box = document.querySelector('.box');
        // 添加点击事
        document.getElementById('btn1').onclick = function () {
            // 获取宽高 , 内容的总宽度和总高度,只能获取不能修改;
            console.log(box.scrollWidth, box.scrollHeight); // 1600 100
        }
        document.getElementById('btn2').onclick = function () {
            box.scrollTop = 500;
            box.scrollLeft = 500;
            // 获取内容往左边滚出去的距离, 和内容往上边滚出去的距离
            console.log(box.scrollTop, box.scrollLeft); // 500 500
            // 它也可以设置, 设置多少, 就滚出去多少, 但是如果设置的值超出它本身最大能滚出去的大小, 那么也只是滚到最后
        }
        // 水平滚动条滚到最右
        document.getElementById('btn3').onclick = function () {
            box.scrollLeft = box.scrollWidth;
        }
        // 垂直滚动条滚到最下
        document.getElementById('btn4').onclick = function () {
            box.scrollTop = box.scrollHeight;
        }

    </script>

</body>

</html>

上一篇 下一篇

猜你喜欢

热点阅读