美文网首页
DOM屏幕尺寸

DOM屏幕尺寸

作者: 开心的小哈 | 来源:发表于2019-03-12 08:54 被阅读0次

求滚动条滚动像素
查看滚动条的滚动距离
window.pageXOffset/pageYOffset
IE8及IE8以下不兼容
document.body/documentElement.scrollLeft/scrollTop
兼容性比较混乱,用时取两个值相加,因为不可能存在两个同时有值
封装兼容性方法,g求滚动轮滚动距离getScrollOffset()

// IE8和IE8以下的浏览器
        // document.body.scrollLeft/top
        // document.documentElement.scrollLeft
        
        function getScrollOffset(){
            if(window.pageXOffset){
                return{
                    x:window.pageXOffset,
                    y:window.pageYOffset
                }
            }else{
                return{
                x:document.body.scrollLeft+document.documentElement.scrollLeft,
                y:document.body.scrollTop+document.documentElement.scrollTop
                }
            }
        }

查看视口的尺寸

window.innerWidth/innerHeight
IE8及IE8以下不兼容
document.documentElement.clientWidth/clientHeight
标准模式下,任意浏览器都兼容
document.body.clientWidth/clientHeight
适用于怪异模式下的浏览器
封装兼容性方法,返回浏览器视口尺寸getViewportOffset()

    function getViewportOffset(){
                if(window.innerWidth){
                    return {
                        w : window.innerWidth,
                        h : window.innerHeight
                    }
                }else{
                    if(document.compatMode=="BackCompat"){
                        return {
                            w : document.body.clinetWidth,
                            h :document.body.clientHeight
                        }
                    }else{
                        return {
                            w:document.documentElement.clientWidth,
                            h : document.documentElement.clientHeight
                        }
                    }
                }
                }

查看元素的几何尺寸

domEle.getBoundingClientRect();
兼容性很好
该方法返回一个对象,对象里面有left,top,right,bottom等属性。left和top代表该元素左上角的X和Y坐标,right和bottom代表元素右下角的X和Y坐标
height和width属性老版本IE并未实现
返回的结果并不是“实时的”

var div =document.getElementsByTagName('div')[0];
        var d=div.getBoundingClientRect()

查看元素的尺寸

dom.offsetWidth,dom.offsetHeight
查看元素的位置
dom.offsetLeft, dom.offsetTop
对于无定位父级的元素,返回相对文档的坐标。对于有定位父级的元素,返回相对于最近的有定位的父级的坐标。
dom.offsetParent
返回最近的有定位的父级,如无,返回body, body.offsetParent 返回null
eg:求元素相对于文档的坐标

让滚动条滚动

window上有三个方法
scroll(),scrollTo(),scrollBy();
三个方法功能类似,用法都是将x,y坐标传入。即实现让滚动轮滚动到当前位置。
区别:scrollBy()会在之前的数据基础之上做累加。
eg:利用scrollBy() 快速阅读的功能

var start=document.getElementsByTagName('div')[0];
        var stop =document.getElementsByTagName('div')[1];
        var timer=0;
        var key=true;
        start.onclick=function (){
            timer=setInterval(function (){
                window.scrollBy(0,10);
            },100);
            key=false;
        }
        stop.onclick=function (){
            clearInterval(timer);
            key=true;
        }

相关文章

  • DOM屏幕尺寸

    求滚动条滚动像素查看滚动条的滚动距离window.pageXOffset/pageYOffsetIE8及IE8以下...

  • Android屏幕尺寸

    安卓屏幕常见尺寸 屏幕尺寸 对应图标尺寸标准 屏幕密度 比例 xxxhdpi...

  • android屏幕适配知识点

    屏幕适配的相关概念: 1.什么是屏幕尺寸,屏幕尺寸分辨率,屏幕像素密度 屏幕尺寸指屏幕的对角线的长度,单位:英寸 ...

  • 屏幕尺寸

    1.数据类型在内存中存储: 1G = 1024MB 1MB = 1024KB 1KB = 1024B(字节) 1B...

  • 屏幕尺寸

    iPhone4 320480iPhone5 320568i...

  • 屏幕尺寸

    http://blog.csdn.net/scorpio_27/article/details/52297643

  • 屏幕尺寸

    发现一篇很全的屏幕尺寸,记录一下,以后方便查。 http://tool.lanrentuku.com/guifan...

  • 屏幕尺寸

    手机型号屏幕尺寸屏幕密度屏幕宽高(pt)屏幕分辨率(px)倍图4/4s3.5inch326 ppi320*480p...

  • 屏幕尺寸

    屏幕分辨率 Screen resolution 屏幕分辨率是指纵横向上的像素点数,单位是px。屏幕分辨率确定屏幕上...

  • 像素px、分辨率、ppi、dpi、dp(dip)

    屏幕尺寸(Screen Size): 屏幕对角线的长度。iPhone5屏幕尺寸为4英寸、iPhone6屏幕尺寸为4...

网友评论

      本文标题:DOM屏幕尺寸

      本文链接:https://www.haomeiwen.com/subject/grybpqtx.html