DOM-5 【滚动距离与高度-可视尺寸-兼容模式】

最新推荐文章于 2022-09-05 08:00:00 发布

可乐雪碧薄荷糖

最新推荐文章于 2022-09-05 08:00:00 发布

阅读量322

点赞数

分类专栏： DOM ECMAScript 文章标签： dom js

本文链接：https://blog.csdn.net/Yesterday_Tomorrow/article/details/109716002

版权

ECMAScript 同时被 2 个专栏收录

41 篇文章 1 订阅

订阅专栏

DOM

10 篇文章 1 订阅

订阅专栏

一.滚动距离与高度

(1).查看滚动条的距离

常规

window.pageXOffset/pageYOffset

IE9/IE8及以下

怪异:document.body.scrollLeft/scrollTop

标准:document.documentElement.scrollLeft/scrollTop

两者只能存其一

不常见

window.scrollx/scrolly

二.可视尺寸(窗口的宽高)

(1).可视窗口尺寸

常规

window.innerWidth/innerHeight

IE9/IE8及以下

怪异:document.body.clientWidth/clientHeight

标准:document.documentElement.clientWidth/clientHeight

(2).可视位置(包含滚动条，工具栏等等)

outerWidth/outerHeight

(3)实际文档距离(不管你页面缩放不缩放)

document.body.scrollHeight/scrollWidth

document.documentElement.scrollHeight/scrollWidth

实际这个就=innerWidth+pageXOffset

(4).打印当前选择位置信息（IE中是没有宽度高度）

不是实时的！不咋用

getBoundingClientRect();

结果:

(5).元素距左距右

父级有定位找距父级距离，没定位找可视距离位置

offsetLeft/offsetTop

确认那个祖先有定位

(6).移动滚动条

scroll和scrollto是一致的

window.scroll(100,100);
window.scrollTo(100,100);

scrollBy(x,y)

可以一直滚

三.兼容模式

(1).浏览器怪异模式和标准模式

<!DOCTYPE html> 标准模式声明

判断方法:

document.compatMode;
//CSS1Compat W3C模式
//BackCompat 怪异模式

(2).封装滚动条功能

function getScrollOffset(){
    if(window.pageXOffset){
        return{
            left:window.pageXOffset,
            top:window.pageYOffset,
        }
    }else{
        return{
            left:document.body.scrollLeft+document.documentElement.scrollLeft,
            top:document.body.scrollTop+document.documentElement.scrollTop
        }
    }
}

(3).封装可视尺寸

function getViewportSize(){
    if(window.innerWidth){
        return{
            width:window.innerWidth,
            height:window.innerHeight
        }
    }else{
        if(document.compatMode==='BackCompat'){
            return{
                width:document.body.clientWidth,
                height:document.body.clientHeight
            }
        }else{
            return{
                width:document.documentElement.clientWidth,
                height:document.documentElement.clientHeight
            }
        }
    }
}

常用模式和怪异模式会包含底部滚动条，最后一个不包含

(4).封装实际尺寸

function getScrollSize(){
    if(document.body.scrollWidth){
        return{
            width:document.body.scrollWidth,
            height:document.body.scrollHeight
        }
    }else{
        return{
            width:document.documentElement.scrollWidth,
            height:document.documentElement.scrollHeight
        }
    }
}

(5).封装距左距上绝对距离

function getElemDocPosition(el){
    var parent=el.offsetParent,
        offsetLeft=el.offsetLeft,
        offsetTop=el.offsetTop;
        while(parent){
            offsetLeft+=parent.offsetLeft;
            offsetTop+=parent.offsetTop;
            parent=parent.offsetParent;
        }
        return {
            left:offsetLeft,
            top:offsetTop
        }
}

可乐雪碧薄荷糖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM-5 【滚动距离与高度-可视尺寸-兼容模式】

一.滚动距离与高度(1).查看滚动条的距离常规window.pageXOffset/pageYOffsetIE9/IE8及以下怪异:document.body.scrollLeft/scrollTop标准:document.documentElement.scrollLeft/scrollTop两者只能存其一不常见window.scrollx/scrolly二.可视尺寸(窗口的宽高)(1).可视窗口尺寸常规window.innerWid
复制链接

扫一扫