获取元素的页面位置

最新推荐文章于 2022-06-14 08:30:00 发布

有节操的程序员

最新推荐文章于 2022-06-14 08:30:00 发布

阅读量332

点赞数

分类专栏： js 文章标签： html5

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
<div id="test"></div>
    <script>
        /**
        *获取页面元素的滚动位置
        @param {DOM} el Dom元素
        *return {Object} 元素滚动位置对象
        */
        function getScroll (el) {
            var d = el,
                doc = document,
                body = doc.body,
                docElement = doc.documentElement,
                l,
                t,
                ret,
                isStrict = document.compatMode == "CSS1Compat",
                isIE = /msie/.test(navigator.userAgent);

            if (d == doc || d == body) {
                if (isIE && isStrict) {
                    l = docElement.scrollLeft;
                    t = docElement.scrollTop;
                } else {
                    l = window.pageXOffset;
                    t = window.pageYOffset;
                }
                ret = {
                    left: l || (body ? body.scrollLeft : 0),
                    top: t || (body ? body.scrollTop : 0)
                };
            } else {
                ret = {
                    left: d.scrollLeft,
                    top: d.scrollTop
                };
            }

            return ret;
        }
        /**
        *获取页面元素的位置
        @param {DOM} el Dom元素
        *return {Object} 元素位置对象
        */
        function getXY (el) {
            var doc = document, bd = doc.body,
                docEl = doc.documentElement,
                leftBorder = 0,
                topBorder = 0,
                ret = [0, 0],
                round = Math.round,
                box,
                scroll,
                isIE = /msie/.test(navigator.userAgent);


            if (el != doc && el != bd) {
                if (isIE) {
                    try {
                        box = el.getBoundingClientRect();
                        // 在ie8之前版本,  documentElement 元素会有两像素的边框, 所以要减去它
                        topBorder = docEl.clientTop || bd.clientTop;
                        leftBorder = docEl.clientLeft || bd.clientLeft;
                    } catch (ex) {
                        box = { left: 0, top: 0 };
                    }
                } else {
                    box = el.getBoundingClientRect();
                }

                scroll = getScroll(document);
                ret = [round(box.left + scroll.left - leftBorder), round(box.top + scroll.top - topBorder)];
            }
            return ret;
        }
        var div = document.getElementById("test");
        var sc = getXY(div);
        console.log(sc);
    </script>
</body>
</html>

有节操的程序员

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
获取元素的页面位置

/** *获取页面元素的滚动位置 @param {DOM} el Dom元素 *return {Object} 元素滚动位置对象 */ function getScroll (el) { var d = el, doc = document,
复制链接

扫一扫