javascript - "overflow-x:scroll" div-container 内で可視性の div 要素を証明することは可能ですか?

Question

現在、overflow-x:scroll コンテナー内の div の表示パーセントの情報を取得する方法を見つけようとしています。また、それが右から来るのか左から来るのかを知る必要がありますか? これはどういうわけか可能ですか？

Answer 1

これは役立つかもしれません。その質問への回答のコードを編集して、要素が右または左からスクロールされたかどうかを確認できます。

スクロール後に要素が表示されるかどうかを確認する

表示可能なパーセンテージを計算するには、子のサイズを親のサイズと比較し、子の「左」オフセットを比較するだけです。

(後でコード例を追加するかもしれません)

編集

「overflow-x:scroll」div コンテナー内でその子の可視パーセンテージを検出する方法と、子が左または右から来ているかどうかを示す小さな例を作成しました。

<style>
#parent {
    overflow-x:scroll;
    width: 300px;
    height:120px;
    border: solid 1px #000;
}
#child {
    width: 200px;
    height: 100px;
    background:#FF0;
    margin-left: 200px;
}
#scrollPane {
    width: 800px;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#button").click(function(){
        alert(percantageVisible() + "% of the child is visible");
    });
});

function percantageVisible()
{
    var parent = $("#parent");
    var parentLeftOffset = parent.offset().left;
    var parentRightOffset = parentLeftOffset + parent.width();

    var child = $("#child");
    var childLeftOffset = child.offset().left;
    var childRightOffset = childLeftOffset + child.width();

    if(childLeftOffset < parentLeftOffset && childRightOffset > parentLeftOffset && childRightOffset < parentRightOffset){
        // percentage from the left
        var width = child.width();
        var hiddenWidth = Math.abs(childLeftOffset - parentLeftOffset);
        var visibleWidth = width - hiddenWidth;
        return visibleWidth/(width/100);
    } 
    else if(childRightOffset > parentRightOffset && childLeftOffset < parentRightOffset && childLeftOffset > parentLeftOffset ){
        // percentage from the right
        var width = child.width();
        var hiddenWidth = Math.abs(parentRightOffset -childRightOffset);
        var visibleWidth = width - hiddenWidth;
        return visibleWidth/(width/100);
    }
    else if (childLeftOffset > parentLeftOffset && childRightOffset < parentRightOffset){
        // all visible
        return 100;
    }
    else{
        // invisible
        return 0;
    }
}
</script>

<div id="parent">
    <div id="scrollPane">
        <div id="child"> </div>
    </div>
</div>
<button id="button">check percentage</button>

お役に立てれば