滾動時懸停在一個元素上

Question

滾動時如何在一個元素上顯示 hover。 如果你不知道它是怎么做到的，請至少告訴我它叫什么。 這里有類似的效果。 關聯

搜索了很多論壇。 因為不知道叫什么所以找不到

Answer 1

如果您想知道它是如何工作的，我會給您留下我對該功能的實現（不完美）和一些評論

 //add event on scroll on the window element and trigger scrollLeftAnimation function window.addEventListener("scroll", scrollLeftAnimation); function scrollLeftAnimation() { //get each element who have scrollLeftAnimation class let scrollLeftAnimationElements = document.querySelectorAll(".scrollLeftAnimation"); //for each scrollLeftAnimation element, call updateAnimation scrollLeftAnimationElements.forEach(SectionElement => updateAnimation(SectionElement)); function updateAnimation(SectionElement) { let ContentElement = SectionElement.querySelector(".animationContent"); //get the top value of element //for reference see https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect let y = ContentElement.getBoundingClientRect().y; //get a pourcent of scrolling let pourcent = Math.abs(SectionElement.getBoundingClientRect().y / (SectionElement.clientHeight - ContentElement.clientHeight)); let ContentOverflowElement = SectionElement.querySelector(".animationContentOverflow"); //get the scroll left available distance let ContentOverflowElementLeftScrollDistance = ContentOverflowElement.scrollWidth - ContentOverflowElement.clientWidth; if (y == 0) { //if element is sticky then scroll left = (max scroll left available distance) * (pourcent of scrolling) ContentOverflowElement.scrollLeft = ContentOverflowElementLeftScrollDistance * pourcent; } else if (y > 0) { //if element is bellow, then scroll left = 0 ContentOverflowElement.scrollLeft = 0; } else { //if element is above, then scroll left = max scroll left available distance ContentOverflowElement.scrollLeft = ContentOverflowElementLeftScrollDistance; } } }

 section { height: 100vh; } /*Main CSS*/ section.scrollLeftAnimation { /*The more the ratio between the height of.scrollLeftAnimation compared to.animationContent the more it will be necessary to scroll*/ height: 300vh; } section.scrollLeftAnimation.animationContent { /* using sticky to keep the element inside the window*/ position: sticky; top: 0; height: 100vh; }.animationContent.animationContentOverflow { height: 25vh; overflow: hidden; } /*CSS for card element*/.animationContent ul { margin: 0; padding: 0; height: 100%; white-space: nowrap; }.card { border: 1px solid black; height: 100%; width: 35vw; background-color: gray; display: inline-block; }.card +.card { margin-left: 50px; }.card:first-child { margin-left: 25px; }.card:last-child { margin-right: 25px; }

 <section style="background-color: darkorchid;">Regular section 1</section> <section class="scrollLeftAnimation" style="background-color: deeppink;"> <div class="animationContent"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant. In fermentum posuere urna nec.</p> <div class="animationContentOverflow"> <ul> <li class="card"><a href="#">card 1</a></li> <li class="card"><a href="#">card 2</a></li> <li class="card"><a href="#">card 3</a></li> <li class="card"><a href="#">card 4</a></li> </ul> </div> </div> </section> <section style="background-color: violet;">Regular section 4</section> <section style="background-color: silver;">Regular section 5</section> <section class="scrollLeftAnimation" style="background-color: peru;"> <div class="animationContent"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant. In fermentum posuere urna nec. Posuere ac ut consequat semper viverra nam libero justo laoreet. Tristique risus nec feugiat in fermentum posuere urna nec tincidunt. Rhoncus dolor purus non enim praesent elementum facilisis leo. Turpis tincidunt id aliquet risus feugiat in ante metus.</p> <div class="animationContentOverflow"> <ul> <li class="card"><a href="#">card 1</a></li> <li class="card"><a href="#">card 2</a></li> <li class="card"><a href="#">card 3</a></li> <li class="card"><a href="#">card 4</a></li> </ul> </div> </div> </section> <section style="background-color: orange;">Regular section 7</section>