Checking Text on Background onscroll - Viewport Problem #57
Description
Hello,
if I scroll and the text leaves the viewport, the class on some images changes from "background--dark" to "background--light". If the text is completely in the viewport, everything is fine, but if it leaves (complete or not), the backgroundcheck doesn't seem to work right.
I took a look at your plugin, and on line 78 I saw, that you run "check()" everytime you scroll.
window.addEventListener(resizeEvent, throttle.bind(null, function () {
resizeCanvas();
check();
}));
window.addEventListener('scroll', throttle.bind(null, check)); //<-- THIS LINE
resizeCanvas();
check();
I fixed this for me, by deleting the line 78 and creating a directive, which does the same (checks by scrolling), but adds a class "gotFontColor" to the element, which just appeared in the viewport when I scrolled and runs "BackgroundCheck.refresh();". If I scroll back to the element, I ask if the element got the class "gotFontColor", and if so, I just do nothing, so the class doesn't change after I just got one.
Cannot explain this proper, so here the code:
CheckoutApp.directive('checkViewport', function() {
'use strict';
// checks if specified element is in Viewport
function isInViewport(element) {
var rect = element.getBoundingClientRect();
var html = document.documentElement;
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || html.clientHeight) &&
rect.right <= (window.innerWidth || html.clientWidth)
);
}
function check(element) {
// is Element in Viewport
if(isInViewport(element)) {
// if element has not class "gotFontColor"
if(!element.classList.contains('gotFontColor')) {
// give element class "gotFontColor"
element.classList.add('gotFontColor');
// run BackgroundCheck.refresh()
BackgroundCheck.refresh();
}
}
}
return {
restrict: 'A',
link: function(scope, element, attrs) {
// Listens to scroll
window.addEventListener('scroll', function() {
// run check()
check(element[0]);
});
}
};
});
I would like to ask if it is possible to add something like this to your code, so the script doesn't check the same elements every time I scroll. Would be perfect, so I could use your code without removing it from the "bower_components". Better to use "official code" than my own "hacked version", if you know what I mean?