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

Question

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

Answer 1

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

检查滚动后元素是否可见

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

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

编辑

我做了一个小例子，展示了如何检测“overflow-x:scroll” div-container 中该孩子的可见百分比以及孩子来自左侧还是右侧。

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

希望这可以帮助