获取页面大小和元素位置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); })