HTML定位（滚动条、元素，视口）定位

最新推荐文章于 2024-03-25 16:19:22 发布

weixin_34365635

最新推荐文章于 2024-03-25 16:19:22 发布

阅读量435

点赞数

原文链接：http://www.cnblogs.com/Garnett-Boy/p/5869369.html

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p onclick=getElementRect(this)>你好</p>
        <p onclick=getElementRect(this)>你好</p>
        <p onclick=getElementRect(this)>你好</p>
        <table border="1" cellspacing="" cellpadding="">
            <tr><th onclick=getElementRect(this)>Header</th></tr>
            <tr><td>Data</td></tr>
            <tr><td>Data</td></tr>
        </table>
    </body>
</html>
<script>
    /**
     * 滚动条的位置
     * @param {Object} w
     */
    function getScrollOffsets(w){
        w = w || window;
        //除了IE 8以及更早的版本以外，其他浏览器都支持
        if(w.pageXOffset != null){
            return {x:w.pageXOffset,y:w.pageYOffset};
        }
        /**
         * document.compatMode用来判断当前浏览器采用的渲染方式。
         * BackCompat：标准兼容模式关闭。
         * CSS1Compat：标准兼容模式开启。
         * 当document.compatMode等于BackCompat时，浏览器客户区宽度是document.body.clientWidth;滚动条的位置document.body.scrollLeft
         * 当document.compatMode等于CSS1Compat时，浏览器客户区宽度是document.documentElement.clientWidth;滚动条的位置 document.documentElement.scrollLeft
         */
        var d = w.document;
        if(document.compatMode == "CSS1Compat"){
            return {x:d.documentElement.scrollLeft,y:d.documentElement.scrollTop};
        }else{
            return {x:d.body.scrollLeft,y:d.body.scrollTop};
        }
    }
    
    //作为一个对象的w和h属性返回视口的尺寸
    function getViewportSize(w){
        //使用指定的窗口， 如果不带参数则使用当前窗口
        w = w || window;
    
        //除了IE8及更早的版本以外，其他浏览器都能用
        if(w.innerWidth != null){
            return {w: w.innerWidth, h: w.innerHeight};
        }
    
        //对标准模式下的IE（或任意浏览器）
        var d = w.document;
        if(document.compatMode == "CSS1Compat"){
            return {w: d.documentElement.clientWidth, h: d.documentElement.clientHeight};
        }else{
            return {w: d.body.clientWidth, h: d.body.clientHeight};
        }
    }
    
    /**
     * 这个方法返回元素在视口坐标中的位置。为了转换为甚至用户滚动浏览器窗口以后任然有效的文档坐标，需要加上滚动偏移量：
     * getBoundingClientRect()方法。该方法是在IE5中引入的，而现在当前的所有浏览器都实现了。它不需要参数，返回left、right、top、bottom属性的对象。
     * @param {Object} e
     */
    function getElementRect(e){
        var box = e.getBoundingClientRect();
        var offsets = getScrollOffsets();
        var x = box.left + offsets.x;
        var y = box.top + offsets.y;
        var w = box.width || box.right - box.left;
        var h = box.height || box.bottom - box.top;
        console.log({x:x, y:y ,w:w, h:h})
        return {x:x, y:y ,w:w, h:h};
    }
</script>