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?
I seem to have same problem. If the target element is half way out of viewport, it get both dark and complex classes, and when scrolling back, it changes color which is visible to user.
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.
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:
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?