0

私のアプリケーションでは、次を使用したい:

element.scrollIntoView()

要素がビューポート内にあることを確認するために、機能します。

ただし、要素がビューポート内にあり、それを「ビューに」設定した場合など、問題が発生する可能性があることがわかりました。それに応じてスクロールバーが移動しますが、これは私が期待したものではありません。

したがって、要素がビューポート内にないことを確認してから、scrollIntoView.

要素がビューポート内にあるかどうかを取得する方法は?

4

2 に答える 2

0

この関数は、要素が完全にビューポートにあるかどうかをチェックします。

function isElementCompletelyInViewPort(element) {

    var elementData = element.getBoundingClientRect(),
        width = document.documentElement.clientWidth,
        height = document.documentElement.clientHeight;

    return ( 
            elementData.bottom <= height
            && elementData.right <= width
            && elementData.left >= 0
            && elementData.top >= 0);       
}

getBoundingClientRectはあまり知られていませんが、すべての主要なブラウザーでサポートされています。 https://developer.mozilla.org/en-US/docs/DOM/element.getBoundingClientRect

改善の提案は大歓迎です:)

于 2012-11-07T08:40:37.937 に答える
0

私は常に jQuery の Viewport プラグインを使用してきましたが、うまく機能しています。

http://www.appelsiini.net/projects/viewport

このプラグインを使用すると、次のようなことができます。

if($(".something:in-viewport").length) {
    // do something
}
于 2012-11-07T08:17:36.057 に答える