javascript - 使用纯 javascript 以百分比形式获取元素在视口(viewport)中的可见性

Question

我正在尝试以百分比(数字 %)的形式从视口(viewport)获取元素的可见性。

下面是我厌倦的代码，但缺少一些东西。

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)
   };
},

我正在尝试从文档视口(viewport)获取 DOM 元素可见性百分比。

Answer 1

我已经修改了几行来运行代码并且运行良好。 检查下面的 fiddle

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>