使用純javascript獲取在視口中的元素可見性百分比

Question

我想從百分比（數量％）的視口獲得元素的可見性。

以下是我厭倦的代碼，但缺少一些東西。

function calculateVisibilityForDiv(div$) { 
    var windowHeight = window.innerWidth || 
    document.documentElement.clientWidth, 
    docScroll  = window.scrollTop || document.body.scrollTop, 
    divPosition  = div$.offsetTop, 
    divHeight  = div$.offsetHeight || div$.clientHeight, 
    hiddenBefore = docScroll - divPosition, 
    hiddenAfter  = (divPosition + divHeight) - (docScroll + 
    windowHeight); 

if ((docScroll > divPosition + divHeight) || (divPosition > docScroll + 
    windowHeight)) { 
    return 0; 
} else { 
    var result = 100; 

    if (hiddenBefore > 0) { 
     result -= (hiddenBefore * 100)/divHeight; 
    } 

    if (hiddenAfter > 0) { 
     result -= (hiddenAfter * 100)/divHeight; 
    } 

    return result; 
} 
} 

var getOffset = function(elem) { 
    var box = { top: 0, left: 0 }; 
    if(typeof elem.getBoundingClientRect !== "undefined") box = 
    elem.getBoundingClientRect(); 
    return { 
    x: box.left + (window.pageXOffset || document.scrollLeft || 0) - 
    (document.clientLeft || 0), 
    y: box.top + (window.pageYOffset || document.scrollTop || 0) - 
    (document.clientTop || 0) 
    }; 
}, 

我想從文檔視口中獲取DOM元素可見性百分比。

Answer 1

我修改了幾行代碼，它工作正常。 檢查下面撥弄

https://jsfiddle.net/darjiyogen/q16c1m7s/1/

'use strict'; 
 
var results = {}; 
 

 
function display() { 
 
    var resultString = ''; 
 
    $.each(results, function(key) { 
 
    resultString += '(' + key + ': ' + Math.round(results[key]) + '%)'; 
 
    }); 
 
    $('p').text(resultString); 
 
} 
 

 
function calculateVisibilityForDiv(div$) { 
 
    debugger; 
 
    div$ = div$[0]; 
 

 
    var windowHeight = window.innerHeight || document.documentElement.clientHeight, 
 
    docScroll = window.scrollTop || document.body.scrollTop, 
 
    divPosition = div$.offsetTop, 
 
    divHeight = div$.offsetHeight || div$.clientHeight, 
 
    hiddenBefore = docScroll - divPosition, 
 
    hiddenAfter = (divPosition + divHeight) - (docScroll + windowHeight); 
 

 
    if ((docScroll > divPosition + divHeight) || (divPosition > docScroll + windowHeight)) { 
 
    return 0; 
 
    } else { 
 
    var result = 100; 
 

 
    if (hiddenBefore > 0) { 
 
     result -= (hiddenBefore * 100)/divHeight; 
 
    } 
 

 
    if (hiddenAfter > 0) { 
 
     result -= (hiddenAfter * 100)/divHeight; 
 
    } 
 

 
    return result; 
 
    } 
 
} 
 

 
var getOffset = function(elem) { 
 
    var box = { 
 
    top: 0, 
 
    left: 0 
 
    }; 
 
    if (typeof elem.getBoundingClientRect !== "undefined") box = elem.getBoundingClientRect(); 
 
    return { 
 
    x: box.left + (window.pageXOffset || document.scrollLeft || 0) - (document.clientLeft || 0), 
 
    y: box.top + (window.pageYOffset || document.scrollTop || 0) - (document.clientTop || 0) 
 
    }; 
 
}; 
 

 
function calculateAndDisplayForAllDivs() { 
 
    $('div').each(function() { 
 
    var div$ = $(this); 
 
    results[div$.attr('id')] = calculateVisibilityForDiv(div$); 
 
    }); 
 

 
    display(); 
 
} 
 

 
$(document).scroll(function() { 
 
    calculateAndDisplayForAllDivs(); 
 
}); 
 

 
$(document).ready(function() { 
 
    calculateAndDisplayForAllDivs(); 
 
});

div { 
 
    height: 300px; 
 
    width: 300px; 
 
    border-width: 1px; 
 
    border-style: solid; 
 
} 
 

 
p { 
 
    position: fixed; 
 
    left: 320px; 
 
    top: 4px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div id="div1">div1</div> 
 
<div id="div2">div2</div> 
 
<div id="div3">div3</div> 
 
<div id="div4">div4</div> 
 
<p id="result"></p>