是否可以在「overflow-x：scroll」div容器內證明div的可見性元素？

Question

我目前正在試圖弄清楚如何獲得溢出x：滾動容器內的div的可見性的百分比。我還需要知道它是來自右邊還是來自左邊？這可能以某種方式嗎？

Answer 1

這可能是有用的。您可以編輯該問題答案中的代碼，以檢查元素是從左側還是右側滾動。

Check if element is visible after scrolling

要計算visable你只需要對孩子的大小與父代的大小和「左」的孩子的偏移量是什麼比例。

（我想補充後的代碼實例）

編輯

我做了一個小例子，告訴你如何可以檢測內部的「溢出-X：滾動」那個孩子的可見率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> 

希望這有助於