获取页面大小和元素位置offset、client、scroll

一、offset（偏移）

　　JS：

        // 父元素中存在position时，获取该元素相对第一个具有定位的父元素的距离
        // 父元素中不存在position时，获取元素相对祖先元素html的距离
        // 获取的距离会自动取整（测试时谷歌三舍四入、火狐四舍五入）
        let offsetLeft = document.getElementById('s_box').offsetLeft
        let offsetTop = document.getElementById('s_box').offsetTop
        // 获取元素的大小（border内，含border、含滚动条）
        let offsetWidth = document.getElementById('s_box').offsetWidth
        let offsetHeight = document.getElementById('s_box').offsetHeight
        // 获取body宽高
        let bodyWidth = document.querySelector('body').offsetWidth
        let bodyHeight = document.querySelector('body').offsetHeight    

　　JQ：

        // 始终获取的元素距离body的距离，保留小数
        $('#s_box').offset().top
        $('#s_box').offset().left

二、client（当前）

　　// 获取元素border宽度
　　let clientLeft = document.getElementById('s_box').clientLeft
　　let clientTop = document.getElementById('s_box').clientTop
　　// 获取元素可视范围的宽高（border内，不含border、不含滚动条）
　　let clientWidth = document.getElementById('s_box').clientWidth
　　let clientHeight = document.getElementById('s_box').clientHeight
　　// 获取可视区的高度
　　document.documentElement.clientHeight

三、scroll（滚动） 

        // 获取页面滚动距离
        // 没有DOCTYPE声明==>23467有效
        // 有DOCTYPE声明==>12345有效
        console.log(document.documentElement.scrollTop, '---->1')
        console.log(window.pageYOffset, '---->2')
        console.log($(window).scrollTop(), '---->3')
        console.log($(document).scrollTop(), '---->4')
        console.log($('html').scrollTop(), '---->5')
        console.log(document.body.scrollTop, '---->6')
        console.log($('html body').scrollTop(), '---->7')
        // js兼容写法
        let bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
        // 获取子元素在父元素内的滚动距离，即父容器滚动距离（这里的#box是父元素）
        $('#box').scroll(function () {
            console.log($('#box').scrollTop())
            console.log(document.getElementById('box').scrollTop)
        })
        //滚动位置可以重写，其他xxTop、xxLeft都是只读
        $('#box').scrollTop(100)
        //scrollHeight，个人理解是指元素滚动范围的高度
        //scrollHeight=父容器高度（不含border）+元素可滚动的最大距离（即scrollTop最大值）
        //scrollHeight=子元素高度（含border）+父容器的padding
        console.log(document.getElementById('box').scrollHeight)

 　　

四、X、Y

        $('#box').click(function(e){
            // 鼠标点击位置相对父容器的坐标
            console.log(e.offsetX)
            console.log(e.offsetY)
            // 鼠标点击位置相对文档视口的坐标（不受滚动条影响）
            console.log(e.clientX)
            console.log(e.clientY)
            // 鼠标点击位置屏幕的坐标
            console.log(e.screenX)
            console.log(e.screenY)
            // 鼠标点击位置相对整个文档的坐标（随滚动条变化）
            console.log(e.pageX)
            console.log(e.pageY)
        })

　　实用demo：通过外部点击操作，使盒子内对应元素滚动到盒子顶部

        $('.content_select').on('click', '.content_select_circular', function (e) {
            let num = $(this).index()
            let scrollTop = $('#box').scrollTop();//父容器滚动距离
            let dotop = $('#box>.subject').eq(num).offset().top;//滚动元素距离文档顶部距离
            let hei = $('#box').offset().top;//父容器距离文档顶部距离
            $('#box').animate({
                scrollTop: scrollTop + dotop - hei
            }, 500);
        })