你能告訴我為什么我的代碼不起作用嗎？當頁面滾動到某個元素時，我想調用一個函數。(我想在不使用jQuery的情況下用普通js找到解決方案)
const numberContainer = document.querySelector('.numbers');
window.addEventListener('scroll', () => {
const scrolled = window.scrollY;
const elementPosition = numberContainer.scrollY;
if(scrolled == elementPosition){
counter();
}
})嘗試對numberContainer使用offsetTop
const elementPosition = numberContainer.offsetTop;HTMLElement(在您的例子中是numberContainer)上沒有名為scrollY的屬性。 offsetTop是你要找的房產。
更多信息請點擊此處-https://developer . Mozilla . org/en-US/docs/Web/API/html element/offsetTop
這段代碼可以用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>