5

もちろん、scrollIntoViewIfNeeded は WebKit のみが提供する機能です。ただし、IE 7 に戻ると互換性が必要なものに取り組んでおり、何かが表示されているかどうかを検出し、表示されていない場合は scrollIntoView() を呼び出す必要があります。

ウィンドウ全体を扱っているわけではないことに注意することも重要です。表示可能なボックスから要素をスクロールできる小さな DIV を扱っている可能性があります。

たとえば、id が「pleaseFindMe」の要素は、div の表示可能領域からオーバーフローした場合にのみスクロールして表示する必要があります。

    <div style='border:1px solid black;width:40%; overflow:scroll;'>
        <span id='e2' style='white-space: nowrap;' >Lorem ipsum aliqua proident veniam et quis consectetur esse dolore non Ut nulla dolor eu culpa. Lorem ipsum sint cupidatat non et adipisicing esse elit officia. proident, sunt in culpa qui officia deserunt mollit anim <span id='pleaseFindMe'>id est</span> laborum. </span>
    </div>
4

3 に答える 3

10

古い質問ですが、今日のブラウザー (IE、Fx) ではまだ関連があるようです。そこで、 のポリフィルを書きましたscrollIntoViewIfNeeded()。

if (!Element.prototype.scrollIntoViewIfNeeded) {
    Element.prototype.scrollIntoViewIfNeeded = function (centerIfNeeded) {
        "use strict";

        function makeRange(start, length) {
            return {"start": start, "length": length, "end": start + length};
        }

        function coverRange(inner, outer) {
            if (false === centerIfNeeded ||
                (outer.start < inner.end && inner.start < outer.end))
            {
                return Math.min(
                    inner.start, Math.max(outer.start, inner.end - outer.length)
                );
            }
            return (inner.start + inner.end - outer.length) / 2;
        }

        function makePoint(x, y) {
            return {
                "x": x, "y": y,
                "translate": function translate(dX, dY) {
                    return makePoint(x + dX, y + dY);
                }
            };
        }

        function absolute(elem, pt) {
            while (elem) {
                pt = pt.translate(elem.offsetLeft, elem.offsetTop);
                elem = elem.offsetParent;
            }
            return pt;
        }

        var target = absolute(this, makePoint(0, 0)),
            extent = makePoint(this.offsetWidth, this.offsetHeight),
            elem = this.parentNode,
            origin;

        while (elem instanceof HTMLElement) {
            // Apply desired scroll amount.
            origin = absolute(elem, makePoint(elem.clientLeft, elem.clientTop));
            elem.scrollLeft = coverRange(
                makeRange(target.x - origin.x, extent.x),
                makeRange(elem.scrollLeft, elem.clientWidth)
            );
            elem.scrollTop = coverRange(
                makeRange(target.y - origin.y, extent.y),
                makeRange(elem.scrollTop, elem.clientHeight)
            );

            // Determine actual scroll amount by reading back scroll properties.
            target = target.translate(-elem.scrollLeft, -elem.scrollTop);
            elem = elem.parentNode;
        }
    };
}

http://jsfiddle.net/obnpd7ra/

このコードは、ネストされたスクロール可能領域と相対的に配置された要素が存在する場合にうまく機能するように設計されています。

于 2015-11-30T16:30:40.283 に答える
9

IE はgetBoundingClientRectIE4 から美しい要素メソッドをサポートしています。IE < 8 にはいくつかの小さな欠陥がありますが、目的には間違いなく使用できます。

だからここにトリックがあります：

var findMe = document.getElementById("pleaseFindMe"),
    contRect = container.getBoundingClientRect(),
    findMeRect = findMe.getBoundingClientRect();
if (findMeRect.top < contRect.top || findMeRect.bottom > contRect.bottom
       || findMeRect.right > contRect.right || findMeRect.left < contRect.left)
    findMe.scrollIntoView();
于 2012-07-12T22:53:10.630 に答える
2

Github でこのポリフィルを確認してください。非標準の WebKit メソッド scrollIntoViewIfNeeded の JavaScript 実装を提供します。

于 2014-05-09T09:17:20.870 に答える