DOM基本操作

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

document.body.scrollLeft与document.documentElement.scrollLeft是冲突的，一个有值另一个的值就为0，

▲兼容性比较混乱，同时取两个值相加，因为不可能存在两个同时有值

so最兼容的写法就是document.body.scrollLeft+document.documentElement.scrollLeft

 

window.pageXOffset/pageYOffset    IE8/IE8以下都不兼容,IE9以上才兼容

举个例子：封装兼容性方法，求滚轮滚动离aa()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    D
</head>
<body>
<div style="width: 10000px; height: 23000px; background-color: #ddd;"></div>
<script type="text/javascript">
    function aa() {
        //0 && window.pageXoffset代表失效,else是验证IE9以下
        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
                }

            }

    }
</script>


</body>
</html>

效果图：

 

2.视口尺寸

window.innerWidth/innerHeight     IE8/IE8以下都不兼容

document.documentElement.clientWidth/clientHeight    标准模式下，任何浏览器都兼容

document.body.clientWidth/clientHeight   适用于怪异模式下的浏览器(当html页面没有声明（<!DOCTYPE html>）是就是怪异模式)

 

 

 

举个例子：

封装兼容性方法，返回浏览器视口尺寸aa()

 

posted @ 2018-03-08 08:34  前端HL  阅读(207)  评论(0)    收藏  举报