get-visible-rectdeprecated

Calculates the visible portion of the element inside the viewport

Usage no npm install needed!

<script type="module">
  import getVisibleRect from 'https://cdn.skypack.dev/get-visible-rect';
</script>

README

getVisibleRect(el)

Build Status Sauce Test Status

Note: tests are failing, because they only run in PhantomJS on travis for now - enabling real browsers soon.

When the element is inside the viewport, getVisibleRect() returns:

{
    visibleHeight,
    visibleWidth,
    height,
    width,
    
    // these positions are relative to the elements top/left
    top,
    bottom,
    left,
    right
}

When element is outside the viewport, visibleHeight and visibleWidth will be 0, while top/bottom/left/right will be undefined.

My primary purpose for building this (and not using something else) is to calculate the visible percentage of the element. visibleHeight is actually bottom - top and visibleWidth is right - left. This means that the visible percentage is (visibleHeight * visibleWidth) / (height * width).