client和scroll小结

client和scroll小结

client
client中常用属性：
clientTop：返回元素的上边框大小
clientLeft：返回元素的左边框大小
clientWidth： 返回元素的宽度
元素宽度 = 左右padding + 实际宽度
clientHeight：返回元素的高度
元素宽度 = 上下padding + 实际宽度

1、client使用HTML

   <!-- 父元素big -->
    <div class="big">
        <!-- 子元素box -->
        <div class="box"></div>

    </div>

2、client使用Css

 * {
            margin: 0;
            padding: 0;
        }

        .big {
            width: 300px;
            height: 300px;
            position: relative;
            border: 1px solid yellow;
            /* background: yellow; */
        }

        .box {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            padding: 10px;
            margin-top: 20px;
            margin-left: 20px;
        }

3、js

 var box = document.querySelector(".box")
    var big = document.querySelector('.big')

    // clientTop  返回元素的上边框大小
    console.log(box.clientTop);   //输出 1

    // clientLeft  返回元素的左边框大小
    console.log(box.clientLeft); //输出 1 

     // clientWidth 
    //   返回元素的宽度  
    //   元素宽度 = 左右padding + 实际宽度
     console.log( box.clientWidth); //输出220  

    //  clientHeight
    //   返回元素的高度  
    //   元素宽度 = 上下padding + 实际宽度
    console.log( box.clientHeight); //输出220

scroll

scroll：可以通过scroll的属性来动态获取元素滚动的距离和元素的大小

onscroll事件：当页面滚动时会触发滚动事件，绑定方法和onclick一样，不同的是，由于页面右侧滚动条是body滚动产生的所以想要动态获取滚动条的话只能将onscroll事件绑定在body上面才有用，或者给scroll绑定一个点击事件点击获取当前滚动条的位置。
scroll常用属性：
scrollTop：滚动条的所在的位置，需要先定义再用
scrollLeft：横向滚动条的位置，需要先定义再用
scrollWidth：获取元素的宽度
scrollHight：获取元素的高度

scrollTop的使用: scrollTop使用前需要先声明，声明方式如下：
1、声明DTD 使用document.documentElement.scrollTop（滚动条所在的位置）
2、不声明DTD 使用document.body.scrollTop（网页被卷去的高）
scrollLeft的使用： 使用方法和scrollTop类似
scrollHeight的使用： 获取元素的高度
scrollWidth的使用： 获取元素的宽度

scroll小例子
html

<div class="box">
        <h1>1</h1>
        <h1>1</h1>
        <h1>1</h1>
        <h1>1</h1>
        <h1>1</h1>
        <h1>1</h1>
        <h1>1</h1>
        <h1>1</h1>
        <h1>1</h1>
        <h1>1</h1>
        <h1>1</h1>
        <h1>1</h1>
        <h1>1</h1>
        <h1>1</h1>
        <h1>1</h1>
    </div>

css

  .box{
            width: 120%;
            height: 100px;
            display: flex;
            /* float: left; */
            flex-wrap: nowrap;
            border: 1px solid red;
        }
        h1{
            width: 500px;
            
        }

js

  var h1 = document.querySelector('h1')
    var box = document.querySelector('.box')
    

        function show(){
            var a = document.documentElement.scrollTop
        console.log(document.documentElement.scrollTop);
        }
       
    //    scrollLeft  和 srcollTop一样产生的滚动条为body的，也需要先声明在用
    var b = document.documentElement.scrollLeft
    // console.log(b);

    // scrollHeight 获取元素的高度
    console.log(box.scrollHeight);

    // scrollWidth  获取的是元素的真实宽度
    console.log(h1.scrollWidth);