ページ絶対位置問題の探索を取得

5830 ワード

jquery ブラウザ IE ext chrome

私たちはよくある要素のページの絶対位置を得る必要があります.例えば、絶対位置のdivを特定の位置にポップアップする必要があります.ある要素の周りにいる場合もあります.マウスでクリックした場所にいる場合もあります.もし私たちが便利に希望のページの絶対位置を手に入れたら、top left属性を指定すればいいです.便利です.あいにくこの方面でIEは標準と一致していないので、まとめる必要があります.Extjsは既成のブリッジツールで、各ブラウザの違いを遮断してくれました.
主に2つの場所です.
Ext.Element.getXY()
この方法は、ページ内の要素の枠線の開始(枠線を含まない)の左、上、右、および下のそれぞれがブラウザウィンドウ(すなわち、スクロール長を含まない)に対する位置を取得し、ブラウザモードとは無関係である.

テストコード:

<!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>
        <style type="text/css">
        html,body{
            margin:0;
            border:0;
            padding:0;
        }
        </style>
    </head>
<body>
    <div id="q"
        style="border:1px solid red;padding:10px;margin:100px;width:600px;height:600px;position:relative;"
        >
        z
        <div id="demo"
        style="border:1px solid red;padding:10px;margin:100px;width:10px;height:10px;"
        >
        </div>
        </div>
        <script type="text/javascript">
            alert(document.getElementById('demo').getBoundingClientRect().top - document.getElementById('q').getBoundingClientRect().top);
        </script>
</body>
</html>

ページ要素の絶対ページ位置を取得します.この方法は主にgetBoundingClientRect(注意:IEデフォルトbodyには枠線があり、firefox、chromeにはない)および現在明確な基準がないoffsetTopおよびoffsetParentを用い、offsetTopは現在の要素と彼の含むブロック要素との間の高さの差を指す(詳細:ボックスモデル参照).この点ie ffはほぼ一致しており,差は小さい.しかし、相対要素offsetParentについては議論がある(詳細はoffsetParent検討参照).

1.getBoundingClientRectが存在する場合

Extの方法は俗称を約束する:

if (el.getBoundingClientRect) {
                b = el.getBoundingClientRect();
                scroll = fly(document).getScroll();
                return [b.left + scroll.left, b.top + scroll.top];
}

2.その他

offsetParentは、現在の要素の位置付けされた祖先要素(position属性がstaticに等しくない)であるため、親要素offsetTopが現在の要素の上縁ieを含まないとは限らず、ffはbodyにoffsetParentがないと考えている.
そこで大まかに言えば、offsetParentに沿って上へoffsetTopを積算すればよい.Extjsはまさにこのようにしているが、各ブラウザの詳細をより多く考慮しただけで、特にその要素の祖先要素たちがスクロールバー(overflowはvisibleではない)を含んでいる場合、以下のように減算する.

//x,y     offsetTop offsetParent        ,  
while (p && p != bd) {
    if (!Ext.isOpera || (p.tagName != 'TR' && !fly(p).isStyle("display", "inline"))) {
        x -= p.scrollLeft;
        y -= p.scrollTop;
    }
    p = p.parentNode;
}

x座標はy座標と同じである.

Ext.EventObject.getPageY()

これは、現在のイベントの発生絶対ページ位置を表し、マウスイベントの場合にのみ有効です.たとえば、クリック、マウスの通過などです.
w 3 cではeventを直接規定する.pageXは、現在のイベントの発生絶対ページの位置です.
ieは直接的な獲得方法がなく、ie専用のevent.ClientXは絶対可視位置であり(スクロールバーを無視)、スクロールバーがスクロールされたページの高さを加算するだけでよい.つまり、ページがどのくらいスクロールされていますか?そうだよscrollTopプロパティ、意味もよくわかります
要素:body
動作:scroll
方向:top
値body.scrollTop
ページがw 3 c標準モードにある場合:以上のbodyはdocumentに変更する.documentElementです.標準モードのとき、これらの属性はhtmlノードに置かれます.
次の記事では、Ext.EventObjectがデフォルトのイベントの発生を阻止する方法と、従来のreturn falseを簡単に説明します.
PS: KISSY実現とiframe内の要素の考慮 :

iframeを考慮して、その内の要素に対してiframeの座標を先に解き、iframe elementが含まれているフォームの座標を再帰的に解きます.

/**
     * support elment in iframe
     * @param elem
     * @param refDocument
     */
    function getOffset(elem, refDocument) {
        var box, x = 0,
            y = 0,
            currentWindow = elem.ownerDocument.defaultView || elem.ownerDocument.parentWindow,
            currentDoc = elem.ownerDocument,
            currentDocElem = currentDoc.documentElement;

        // 1.    body   docElem,      0,        ，       
        // 2.    GBS     ，A-Grade Browsers      getBoundingClientRect   ，            
        if (elem[GET_BOUNDING_CLIENT_RECT]) {
            if (elem !== currentDoc.body && currentDocElem !== elem) {
                box = elem[GET_BOUNDING_CLIENT_RECT]();

                //  ：jQuery       docElem.clientLeft/clientTop
                //      ，         html   body    /     ，       
                //   ，ie6     html   margin  ，            html   margin

                x = box.left + _scrollLeft(currentWindow, currentDocElem, currentDoc);
                y = box.top + _scrollTop(currentWindow, currentDocElem, currentDoc);
            }
            if (refDocument) {
                var refWindow = refDocument.defaultView || refDocument.parentWindow;
                if (currentWindow != refWindow && currentWindow.frameElement) {
                    //note:when iframe is static ,still some mistake
                    var iframePosition = DOM.offset(currentWindow.frameElement, refDocument);
                    x += iframePosition.left;
                    y += iframePosition.top;
                }
            }

        }

        return { left: x, top: y };
    }

PS2 : ページの絶対位置の設定の検討

モバイル側がjqueryを使用してスクロールリスニングscrollTopを0にする可能性のある理由

touchSwipe移動端タッチイベント