是否可以在“overflow-x：scroll”div-container中证明可见性的div元素？

Question

我目前正在试图弄清楚如何获取溢出-x：滚动容器中div的可见百分比的信息。我还需要知道它是来自右边还是左边？这有可能吗？

Answer 1

这可能会有所帮助。您可以编辑该问题答案中的代码，以检查该元素是从右侧还是左侧滚动。

Check if element is visible after scrolling

要计算可见百分比，您只需将孩子的大小与父母的大小进行比较，以及孩子的“左”偏移量是什么。

（我稍后可能会添加一个代码示例）

修改

我做了一个小例子，展示了如果孩子来自左边或右边，如何在“overflow-x：scroll”div-container 和中检测到该孩子的可见百分比。< / p>

<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>

希望这有帮助