用户向下滚动时如何在 div 上设置 class

Question

我需要做一件事。 我需要创建一个网站并控制用户的滚动并根据页面上的元素添加类，例如这里.. www.blogger.com。 当用户向下滚动时，class“活动”被添加到部分。 有谁知道任何指示或任何这样做的？ 非常感谢，我对 JavaScript 还不是很友好。

Answer 1

您可以使用“滚动”事件，这是w3schools的一个示例

 const scrollableEl = document.getElementById("scrollable-item") let x = 0; scrollableEl.addEventListener('scroll', function(e) { document.getElementById("demo").innerHTML = x += 1; });

 div { border: 1px solid black; width: 200px; height: 100px; overflow: scroll; }

 <p>Try the scrollbar in div.</p> <div id="scrollable-item">In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. <br><br> 'Whenever you feel like criticizing anyone,' he told me, just remember that all the people in this world haven't had the advantages that you've had.'</div> <p>Scrolled <span id="demo">0</span> times.</p>

Answer 2

不知何故，我管理了类似的东西，但我不知道它写得有多好，因为我对 JavaScript 了解不多。

 var sections = [ "#mainPageSection-1", "#mainPageSection-2", "#mainPageSection-3" ], sectionHeights = [ $("#mainPageSection-1").outerHeight(), $("#mainPageSection-2").outerHeight(), $("#mainPageSection-3").outerHeight() ], scrollBreakpoint = 0, i = 0; $(window).scroll(function() { totalView = $(window).height() + $(this).scrollTop(); if((totalView > scrollBreakpoint) && (i < 3)){ document.querySelector(sections[i]).classList.add("scrolled"); scrollBreakpoint += (sectionHeights[i] + $(window).height()/5.5); i++; } });

 .mainPageSection{ height: 800px; color:white; } #mainPageSection-1{ background-color: grey; } #mainPageSection-2{ background-color: blue; } #mainPageSection-3{ background-color: red; }.scrolled{ color: black; transition: all.5s ease-in-out; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section class="mainPageSection" id="mainPageSection-1"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vestibulum efficitur pharetra. Duis eget dictum nunc. Donec gravida, nisl ut ultrices malesuada, turpis felis dictum tortor, eu eleifend ante turpis nec metus. Nunc imperdiet ligula eget orci feugiat ultricies. Cras ac ex iaculis, maximus lorem non, luctus nibh. Sed viverra egestas sem, non varius quam maximus non. Fusce nulla quam, tincidunt vitae vulputate mollis, semper eu risus. Praesent vel nisl eu enim ullamcorper congue eget vitae felis. Suspendisse aliquam neque sit amet molestie efficitur. Maecenas ut consectetur purus. Duis eget imperdiet nisl. Praesent ut elit ut tortor laoreet ultricies. Nulla ac orci quam. Curabitur mattis lorem ex, eget laoreet lectus rutrum id. Nulla tincidunt enim vitae lobortis interdum. Donec urna nisi, molestie eu molestie eget, molestie quis diam.</p> </section> <section class="mainPageSection" id="mainPageSection-2"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vestibulum efficitur pharetra. Duis eget dictum nunc. Donec gravida, nisl ut ultrices malesuada, turpis felis dictum tortor, eu eleifend ante turpis nec metus. Nunc imperdiet ligula eget orci feugiat ultricies. Cras ac ex iaculis, maximus lorem non, luctus nibh. Sed viverra egestas sem, non varius quam maximus non. Fusce nulla quam, tincidunt vitae vulputate mollis, semper eu risus. Praesent vel nisl eu enim ullamcorper congue eget vitae felis. Suspendisse aliquam neque sit amet molestie efficitur. Maecenas ut consectetur purus. Duis eget imperdiet nisl. Praesent ut elit ut tortor laoreet ultricies. Nulla ac orci quam. Curabitur mattis lorem ex, eget laoreet lectus rutrum id. Nulla tincidunt enim vitae lobortis interdum. Donec urna nisi, molestie eu molestie eget, molestie quis diam.</p> </section> <section class="mainPageSection" id="mainPageSection-3"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vestibulum efficitur pharetra. Duis eget dictum nunc. Donec gravida, nisl ut ultrices malesuada, turpis felis dictum tortor, eu eleifend ante turpis nec metus. Nunc imperdiet ligula eget orci feugiat ultricies. Cras ac ex iaculis, maximus lorem non, luctus nibh. Sed viverra egestas sem, non varius quam maximus non. Fusce nulla quam, tincidunt vitae vulputate mollis, semper eu risus. Praesent vel nisl eu enim ullamcorper congue eget vitae felis. Suspendisse aliquam neque sit amet molestie efficitur. Maecenas ut consectetur purus. Duis eget imperdiet nisl. Praesent ut elit ut tortor laoreet ultricies. Nulla ac orci quam. Curabitur mattis lorem ex, eget laoreet lectus rutrum id. Nulla tincidunt enim vitae lobortis interdum. Donec urna nisi, molestie eu molestie eget, molestie quis diam.</p> </section>

Answer 3

您可以通过 css class overflow来控制滚动。 如果您想处理 javascript 中的滚动，那么您可以检查window.scroll

检查此链接： https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll