Chrome is being difficult. I have this snippet (props to Pirijan) that tells whether or not element is in viewport. It works on IE and Edge. But not when I run the doodle in Chrome (nor Canary). In Chrome it seems to be visible even before it is scrolled into the viewport. It calculates visibility correctly after you scroll past it. I tried running it through the external server - same shit. Funny thing, through codepen or jsfiddle, it works!
<html>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box orange"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<style type="text/css">
.box {
width: 100px;
height: 100px;
margin-bottom: 10px;
background: blue;
}
.orange {
background: orange;
}
.blue {
color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
<script type="text/javascript">
$(function() {
$(window).on('load resize scroll', function() {
addClassToElementInViewport($('.orange'), '');
});
function addClassToElementInViewport(element, newClass) {
if (inViewport(element)) {
console.log('visible') //it just logs 'visible', if the thing is... well - visible
}
}
function inViewport(element) {
if (typeof jQuery === "function" && element instanceof jQuery) {
element = element[0];
}
var elementBounds = element.getBoundingClientRect();
return (
elementBounds.top >= 0 &&
elementBounds.left >= 0 &&
elementBounds.bottom <= $(window).height() &&
elementBounds.right <= $(window).width()
);
}
});
</script>
</body>
</html>