Lewis Cowles
Jan 15, 2018 · 1 min read

I also used the concept but abandoned jQuery for vanilla JS.

It works in Firefox stable & Chrome Stable, android 7 chrome

function isInViewport(elem) {
let elemTop = elem.offsetTop;
let elemBottom = elemTop + elem.height;
let viewportTop = window.scrollY;
let viewportBottom = viewportTop + window.innerHeight;
return elemBottom > viewportTop && elemTop < viewportBottom;

The problem as I see it is ensuring you have this setup, so anything you use it to trigger works without JS (although possibly degraded).

  • No “above the fold” effects using this
  • Hide other elements using css with a body rule

Thanks for sharing. You can also take into account horizontal movement using window.innerWidth, window.scrollX, elem.offsetLeft & elem.width and additional checks. Personally I probably won’t end up using anyway as I’m sure there are plenty of edge cases, but I find the notion very interesting.

Visual-effects & late-loading aside this could also be useful for monitoring how far down single-page multi-section sites visitors progress.

Lewis Cowles

Written by

Digital Architect & Owner - http://www.codesign2.co.uk UK-based I.T. Consultancy.I make things happen and could probably help you deliver software & experiences