api中的scroll、offset、client

achu
237 阅读2分钟

scroll、offset、client

scroll

使用场景：

我们想要页面滚动一段距离，比如100px，就让某些元素显示隐藏，那我们怎么知道，页面滚动了100像素呢？ 就可以使用scroll 来检测页面滚动的距离~~~

获取宽高：

获取元素的内容总宽高（不包含滚动条）返回值不带单位 scrollWidth和scrollHeight(dom.scrollWidth和dom.scrollHeight)

获取位置:

获取元素内容往左、往上滚出去看不到的距离 scrollLeft和scrollTop(dom.scrollLeft和dom.scrollTop) 这两个属性是可以修改的

04.14.01.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            overflow: scroll;
        }
    </style>
</head>

<body>
    <div>
        <h1>1</h1>
        <h1>2</h1>
        <h1>3</h1>
        <h1>4</h1>
        <h1>5</h1>
        <h1>6</h1>
        <h1>7</h1>
        <h1>8</h1>
        <h1>9</h1>
        <h1>10</h1>
        <h1>11</h1>
        <h1>12</h1>
        <h1>13</h1>
        <h1>14</h1>
        <h1>15</h1>
        <h1>16</h1>
        <h1>17</h1>
        <h1>18</h1>
        <h1>19</h1>
        <h1>20</h1>
        <h1>21</h1>
        <h1>22</h1>
        <h1>23</h1>
        <h1>24</h1>
        <h1>25</h1>
        <h1>26</h1>
        <h1>27</h1>
        <h1>28</h1>
        <h1>29</h1>
        <h1>30</h1>
        <h1>31</h1>
        <h1>32</h1>
        <h1>33</h1>
        <h1>34</h1>
        <h1>35</h1>
        <h1>36</h1>
        <h1>37</h1>
        <h1>38</h1>
        <h1>39</h1>
        <h1>40</h1>
        <h1>41</h1>
        <h1>42</h1>
        <h1>43</h1>
        <h1>44</h1>
        <h1>45</h1>
        <h1>46</h1>
        <h1>47</h1>
        <h1>48</h1>
        <h1>49</h1>
        <h1>50</h1>
    </div>

    <script>
        const div = document.querySelector('div')

        div.addEventListener('scroll', function() {
            console.log(div.scrollHeight); //返回滚动元素高
            console.log(this.scrollTop); //返回滚动元素滚动值
        })
    </script>
</body>

</html>

offset

使用场景： 前面案例滚动多少距离，都是我们自己算的，最好是页面滚动到某个元素，就可以做某些事。 简单说，就是通过js的方式，得到元素在页面中的位置这样我们可以做，页面滚动到这个位置，就可以返回 顶部的小盒子显示…

041402.png

获取宽高：

获取元素的自身宽高、包含元素自身设置的宽高、padding、border offsetWidth和offsetHeight

获取位置：

获取元素距离自己定位父级元素的左、上距离 offsetLeft和offsetTop 注意是只读属性

问题

offsetTop和offsetLeft 得到位置以谁为准？ 带有定位的父级 如果都没有则以 文档左上角 为准

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent {
            width: 600px;
            height: 600px;
            background-color: red;
            position: fixed;
            top: 100px;
            left: 200px;
        }
        
        .offsetdom {
            width: 300px;
            height: 300px;
            background-color: pink;
            overflow: scroll;
        }
    </style>
</head>

<body>
    <div class="parent">

        <h1>007</h1>
        <div class="offsetdom"></div>

    </div>

    <script>
        const offsetdom = document.querySelector('.offsetdom')

        console.log(offsetdom.offsetHeight); //获取元素高度,包括滚动条
        console.log(offsetdom.offsetWidth); //元素宽

        console.log(offsetdom.offsetTop); //元素相对父盒子水平距离
        console.log(offsetdom.offsetLeft); //相对父盒子的垂直距离
    </script>
</body>

</html>

client

获取宽高：

获取元素的可见部分宽高（不包含边框，滚动条等,但是包含内外边距） clientWidth和clientHeight

获取位置：

获取左边框和上边框宽度 clientLeft和clientTop 注意是只读属性(返回的是边框的大小,但是没有右下边框属性)

041403.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: red;
            box-sizing: border-box;
            padding: 10px;
            margin: 10px;
            border: 10px solid #000;
        }
    </style>
</head>

<body>
    <div></div>

    <script>
        const div = document.querySelector('div')

        console.log(div.clientHeight);//返回可视区域高,但是不包括边框和滚动条
        console.log(div.clientWidth);

        console.log(div.clientLeft);//返回边框大小
        console.log(div.clientTop);
    </script>
</body>

</html>

三者的区别

scroll家族

获取元素内容的总大小 获取元素向左向上滚出去看不见的距离 可读写属性

offset家族

获取元素自身大小：包括自身设置的宽高、padding、border 获取元素距离定位父级的左和上距离 只读属性

client家族

获取元素可见区域的大小(不包括border和scroll滚动条) 获取元素左、上边框距离 只读属性

事件对象中的client和offset

clientX/clientY

获取光标相对于浏览器可见窗口左上角的位置

 window.addEventListener('mousemove', (event) => {         //绑定鼠标移动事件
            console.log(event.clientX, event.clientY);
        })
//输出鼠标所在的坐标值

offsetX/offsetY

获取光标相对于当前DOM元素左上角的位置

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        const div = document.querySelector('div')

        div.addEventListener('click', function(event) {
            console.log(event.offsetX, event.offsetY);
            //输出相对DOM元素左上角的坐标
        })
    </script>
</body>

</html>
avatar
文章
阅读
粉丝