我的頁面包含一個計數器，我想添加一個方法，使計數器在達到某個高度時啟動。我已經計算出我希望計數器從 324px 的高度開始，但由于我對 JavaScript 的經驗很少，我不確定我在尋找什么。有人能幫我嗎？
這是我當前的代碼：
const counters = document.querySelectorAll('.counter');
const speed = 2000;
counters.forEach(counter => {
const updateCount = () => {
const target = counter.getAttribute('data-target');
const count = counter.innerText;
const inc = target / speed;
if (count < target) {
counter.innerText = Math.ceil(count inc);
requestAnimationFrame(updateCount, 1);
} else {
count.innerText = target;
}
}
updateCount();
});
<div class="container-b">
<div class="container">
<div class="row">
<div class="counters">
<div class="card-image" id="purple-b">
<i class="fas fa-users"></i>
<div class="counter" data-target="231">0</div>
<p class="card-b-text">Happy Users</p>
</div>
<div class="card-image" id="green-b">
<i class="fas fa-code"></i>
<div class="counter" data-target="385">0</div>
<p class="card-b-text">Issues Solved</p>
</div>
<div class="card-image" id="red-b">
<i class="fas fa-cog"></i>
<div class="counter" data-target="159">0</div>
<p class="card-b-text">Good Reviews</p>
</div>
<div class="card-image" id="orange-b">
<i class="fas fa-comments"></i>
<div class="counter" data-target="127">0</div>
<p class="card-b-text">Case Studies</p>
</div>
<div class="card-image" id="blue-b">
<i class="fas fa-rocket"></i>
<div class="counter" data-target="211">0</div>
<p class="card-b-text">Orders Received</p>
<p></p>
</div>
</div>
</div>
</div>
</div>
uj5u.com熱心網友回復：
我不知道這是否是你要找的東西。如果有錯你可以多描述一下，因為我不太明白。
假設我有一個 3000px CSS 的頁面：
.counter{
height: 3000px;
}
我希望每當我滾動通過 324px 時，它都會為你做一些事情
const counters = document.querySelectorAll('.counter');
window.onscroll=function(){
if(scrollY >= 324){
console.log("Do your start count things or something in here")
}
}
uj5u.com熱心網友回復：
我會這樣做：
對兩個元素使用相同requestAnimationFrame()的，并在沒有更新時停止它
const
speed = 2000
, counters = [...document.querySelectorAll('.counter')]
.map(el=>(
{ el
, target : el.dataset.target
, inc : (el.dataset.target / speed)
, count : parseInt(el.textContent)
}))
;
requestAnimationFrame(updateCount)
function updateCount()
{
let elmsRun = counters.length
counters.forEach(({ el, target, inc, count}, i) =>
{
el.textContent = counters[i].count
= (count < target) ? Math.ceil(count inc) : target
if (counters[i].count === target) --elmsRun
})
if (elmsRun) requestAnimationFrame(updateCount)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/410710.html
標籤：