diff --git a/resources/views/segments/index/CounterGrid/CounterGrid.js b/resources/views/segments/index/CounterGrid/CounterGrid.js index c4db602..160a2c8 100644 --- a/resources/views/segments/index/CounterGrid/CounterGrid.js +++ b/resources/views/segments/index/CounterGrid/CounterGrid.js @@ -6,13 +6,15 @@ var isCounterInited = false; function isElementInViewport(el) { const rect = el.getBoundingClientRect(); return ( - rect.top >= 0 && - rect.left >= 0 && - rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && - rect.right <= (window.innerWidth || document.documentElement.clientWidth) + rect.bottom > 0 && + rect.right > 0 && + rect.top < (window.innerHeight || document.documentElement.clientHeight) && + rect.left < (window.innerWidth || document.documentElement.clientWidth) ); } + + function uncommafy(txt) { return txt.split(',').join(''); } @@ -31,42 +33,46 @@ function commafy(num) { return str.join('.'); } -document.addEventListener('DOMContentLoaded', function () { - window.addEventListener('scroll', function() { - const container = document.getElementById('CounterGrid'); - if (container == null){ - return ; - } - if (isElementInViewport(container)) { - if (!isCounterInited){ - isCounterInited = true; - document.querySelectorAll('.grid-counter').forEach(function (el, key) { +const handleScroll = function() { + const container = document.getElementById('CounterGrid'); + console.log(isElementInViewport(container)); + if (container == null){ + return ; + } + if (isElementInViewport(container)) { + if (!isCounterInited){ + isCounterInited = true; + document.querySelectorAll('.grid-counter').forEach(function (el, key) { - let max = parseInt(el.getAttribute('data-max')); - let min = parseInt(el.getAttribute('data-min')); - let diff = max - min; - counters[key] = 0; - steps[key] = parseInt(diff / 99); + let max = parseInt(el.getAttribute('data-max')); + let min = parseInt(el.getAttribute('data-min')); + let diff = max - min; + counters[key] = 0; + steps[key] = parseInt(diff / 99); - let tmp = setInterval(() => { - counters[key] += steps[key]; - document.querySelectorAll('.grid-counter')[key].innerHTML = commafy(counters[key]); - }, 100); - setTimeout(function () { - for (const i in intervals) { - clearInterval(intervals[i]); - document.querySelectorAll('.grid-counter')[key].innerHTML = commafy(document.querySelectorAll('.grid-counter')[key].getAttribute('data-max')); - } + let tmp = setInterval(() => { + counters[key] += steps[key]; + document.querySelectorAll('.grid-counter')[key].innerHTML = commafy(counters[key]); + }, 100); + setTimeout(function () { + for (const i in intervals) { + clearInterval(intervals[i]); + document.querySelectorAll('.grid-counter')[key].innerHTML = commafy(document.querySelectorAll('.grid-counter')[key].getAttribute('data-max')); + } - }, 9900); - intervals.push(tmp); - }); - } - // Remove event listener if you only want to alert once - // this.removeEventListener('scroll', arguments.callee); + }, 9900); + intervals.push(tmp); + }); } - }); + // Remove event listener if you only want to alert once + // this.removeEventListener('scroll', arguments.callee); + } +}; +document.addEventListener('DOMContentLoaded', function () { + + window.addEventListener('scroll', handleScroll); + window.addEventListener('touchmove', handleScroll); });