问题描述
谁能告诉我如何在机车滚动中查看元素时触发功能,我是菜鸟,请详细解释, 提前致谢
const counterFunc = () => {
counters.forEach((counter) => {
const updateCount = () => {
const target = +counter.getAttribute("data-target");
const count = +counter.innerText;
// Lower inc to slow and higher to slow
const inc = target / speed;
// console.log(inc);
// console.log(count);
// Check if target is reached
if (count < target) {
// Add inc to count and output in counter
counter.innerText = count + inc;
// Call function every ms
setTimeout(updateCount,1);
} else {
counter.innerText = target;
}
};
updateCount();
});
};
//HTML
<div id="counter-SUBSCRIBERS">
<h1 class="counter" data-scroll data-target="60000">0</h1>
<h5>Subscribers</h5>
</div>
<div id="counter-VIDEOS">
<h1 class="counter" data-target="15000">0</h1>
<h5>Comments</h5>
</div>
<div id="counter-ENGAGEMENT">
<h1 class="counter" data-target="9000">0</h1>
<h5>Share</h5>
解决方法
您可以研究的示例:
var el = document.getElementById("test");
var wheel = "nothing";
var scroll = new LocomotiveScroll({
el: el,smooth: true,repeat: true,getDirection: true
});
scroll.on("call",(fun,dir,obj) => {
console.log("call",fun,dir);
});
scroll.on("scroll",(obj) => {
if (obj.direction == wheel)return;
wheel = obj.direction;
console.log("scroll--",obj.direction);
console.log(obj.currentElements['2'],Object.keys(obj.currentElements));
});
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.0/dist/locomotive-scroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@4.1.0/dist/locomotive-scroll.min.css">
<div id="test">
<div data-scroll-section>
<section class="intro" data-scroll data-bg="#ffffff" data-color="#000000" >
<div class="container">
<div class="intro__content">
<h5 class="intro__subtitle">
<span>Lorem ipsum dolor.</span>
</h5>
<h2 class="intro__title" data-scroll data-scroll-call="text0">If I scroll to the second intro section (AND the first intro is in the viewport) it will change to a black background. But if I scroll up it will not change to a white background as the section did not get out from the viewport and the last
call was with a black background.</h2>
<p>You have to completely pass through a section to be able to reverse back the colors.<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
</div>
</div>
</section>
</div>
<h2 class="intro__title" data-scroll data-scroll-call="text1">If I scroll to the second intro section (AND the first intro is in the viewport) it will change to a black background. But if I scroll up it will not change to a white background as the section did not get out from the viewport and the last
call was with a black background.</h2>
<p>You have to completely pass through a section to be able to reverse back the colors.<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
</div>
</div>
</section>
</div>
</div>