Javascript 是否有可能证明div元素在“a”中的可见性；溢出-x：滚动“；div集装箱？

我目前正试图弄清楚如何获得overflow-x:scroll容器中div的可视性百分比的信息。我还需要知道它是从右边来的还是从左边来的？这可能吗？

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

要计算可视百分比，只需比较子对象的大小与父对象的大小以及子对象的“左”偏移量

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

编辑

我举了一个小例子，说明如何检测“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>

#母公司{
溢出-x：滚动；
宽度：300px；
高度：120px；
边框：实心1px#000；
}
#孩子{
宽度：200px；
高度：100px；
背景：#FF0；
左边距：200px；
}
#滚动窗格{
宽度：800px；
}
$（文档）.ready（函数（）{
$（“#按钮”）。单击（函数（）{
警报（子项的percantivesible（）+%可见）；
});
});
函数percantivable（）
{
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（childLeftOffsetparentLeftOffset&&childRightOffsetparentRightOffset&&childLeftOffsetparentLeftOffset）{
//右边的百分比
var width=child.width（）；
var hiddenWidth=Math.abs（parentRightOffset-childRightOffset）；
var visibleWidth=宽度-隐藏宽度；
返回可见宽度/（宽度/100）；
}
else if（childLeftOffset>parentLeftOffset&&childRightOffset

---

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

要计算可视百分比，只需比较子对象的大小与父对象的大小以及子对象的“左”偏移量

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

编辑

我举了一个小例子，说明如何检测“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>

#母公司{
溢出-x：滚动；
宽度：300px；
高度：120px；
边框：实心1px#000；
}
#孩子{
宽度：200px；
高度：100px；
背景：#FF0；
左边距：200px；
}
#滚动窗格{
宽度：800px；
}
$（文档）.ready（函数（）{
$（“#按钮”）。单击（函数（）{
警报（子项的percantivesible（）+%可见）；
});
});
函数percantivable（）
{
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（childLeftOffsetparentLeftOffset&&childRightOffsetparentRightOffset&&childLeftOffsetparentLeftOffset）{
//右边的百分比
var width=child.width（）；
var hiddenWidth=Math.abs（parentRightOffset-childRightOffset）；
var visibleWidth=宽度-隐藏宽度；
返回可见宽度/（宽度/100）；
}
else if（childLeftOffset>parentLeftOffset&&childRightOffset

---

希望这有帮助

我认为css或jquery中没有任何机制。你必须应用你自己的数学。您可以像这样找到高度-

父容器高度-
内容高度。你必须应用你自己的数学。您可以这样找到高度-
父容器高度-内容高度
@SebastianBoldt，如果您不介意检查问题的答案；）@SebastianBoldt如果您不介意检查问题的答案；）