javascript 当页面滚动到某个元素时，如何调用函数？

dtcbnfnu 于 2023-06-04 发布在 Java

关注(0)|答案(3)|浏览(469)

你能告诉我为什么我的代码不工作。当页面滚动到某个元素时，我想调用一个函数。（我想在vanilla js中找到解决方案，而不使用jQuery）

const numberContainer = document.querySelector('.numbers');

window.addEventListener('scroll', () => {
    const scrolled = window.scrollY;
    const elementPosition = numberContainer.scrollY;
    
    if(scrolled == elementPosition){
        counter();
    }
})

JavaScript

来源：https://stackoverflow.com/questions/66214489/how-to-call-a-function-when-page-is-scrolled-to-certain-element

3条答案

按热度按时间

hjqgdpho1#

尝试对numberContainer使用offsetTop

const elementPosition = numberContainer.offsetTop;

赞(0）回复(0）举报 2023-06-04

idv4meu82#

- HTMLElement**上没有名为scrollY的属性（在您的示例中为numberContainer）。offsetTop是您正在寻找的属性。

赞(0）回复(0）举报 2023-06-04

nzk0hqpo3#

这段代码可以在JavaScript中解决这个问题

// Get the div element with the ID "monkey".
 const monkey = document.getElementById('monkey');

  checkVisibility = () => {

 // Check if the div element is scrolled into view.
 if (monkey.getBoundingClientRect().top < window.innerHeight/2 ) {

   // Change the background color to red.
   monkey.style.backgroundColor = 'red';
   
   monkey.innerText = "I made it at last hurrayyyyy!!! " + window.innerHeight
   
   
   //If you want this to happen only once then you can add line 20, if not don't remove the eventlistiner as I did in line 20(I mean delete line 20)
   window.removeEventListener('scroll', checkVisibility )
   
 }
}

// Set a listener for the "scroll" event below the function.
window.addEventListener('scroll', checkVisibility );

EXPLANATION TO CODE

/*
COMMENTS
see JAVASCRIPT line 11: I did 
window.innerHeight/2  ...divided by two will mean that when the monkey div gets to half of the screen, the function is fired. you can mathematically twerk that to what you want. 

if you remove the divide by two entirely, by that I mean to change the code at line 11 as 
if (monkey.getBoundingClientRect().top < window.innerHeight) {

immediately the monkey div appears on the screen the function is fired.

CAUTION: DO NOT PLACE LINE 27 ABOVE LINE 8 AS YOU WILL BE SETTING THE EVENT LISTENER AHEAD OF THE FUNCTION AND IT MAY NOT WORK. AT LEAST WHEN I TRIED IT OUT, THAT WAS WHAT I FOUND.

*/

<!DOCTYPE html>
<html lang="en">
<head>
    <title>ZigLewis solution to making a function run when an element gets to a particular screen position
    </title>
</head>

<body>



 <p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem doloremque molestiae delectus asperiores, eaque totam? Dicta deleniti repelr vel duptates mollitia rem doloremque excepturi reprehenderit fugit exercitationem incidunt. Non deleniti beatae fuga fugit culpa aliquam fugiat error .</p>
 
 <p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem doloremque molestiae delectus asperiores, eaque totam? Dicta deleniti repe </p>
<p> SCROLL UP SLOWLY TILL YOU CANT SEE ME! </P>
<br>
<hr>
 

<div id = "monkey"> KEEP YOUR EYES HERE ON THE MONKEY </div>
<hr>
<br>
<br>

        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem doloremque molestiae delectus asperiores, eaque totam? Dicta deleniti repelr vel duptates mollitia rem doloremque excepturi reprehenderit fugit exercitationem incidunt. Non deleniti beatae fuga fugit culpa aliquam fugiat error provident facere quo soluta porro accusamus qui sed assumenda, alias excepturi ratione minus voluptates vel aspernatur cum doloribus sapiente. Libero, consequatur quam at quos quae rem.
 <p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem doloremque molestiae delectus asperiores, eaque totam? Dicta deleniti repelr vel duptates mollitia rem doloremque excepturi reprehenderit fugit exercitationem incidunt. Non deleniti beatae fuga fugit </p>
 

 <p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem doloremque molestiae delectus asperiores, eaque totam? Dicta deleniti repelr vel duptates mollitia rem doloremque excepturi reprehenderit fugit exercitationem incidunt. Non deleniti beatae fuga fugit </p>
 
  <p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem doloremque molestiae delectus asperiores, eaque totam? Dicta deleniti repelr vel duptates mollitia rem doloremque excepturi reprehenderit fugit exercitationem incidunt. Non deleniti beatae fuga fugit </p>

 </body>
</html>

赞(0）回复(0）举报 2023-06-04

我来回答

javascript 当页面滚动到某个元素时，如何调用函数？

3条答案

相关问题

热门标签

最新问答