如果我的网页的用户在其上达到某个点，是否可以运行一个函数？

Question

我尝试与不同的divs进行网站，或者对我来说是部分。如果我到达其中之一的顶部，则应该安装本学期日志。如果您问，则滚动量等于设备的ScreenHeight的1％。

let Point1 = false;
document.addEventListener("scroll", e=> {
if (document.documentElement.scrollTop >= 150*ScrollHeight) {
    if (Point1 == false){
        Point1 = true;
        Point1F();
    };
}
})
function Point1F() {
console.log("U've done it');
}

但这对我来说并不折腾。

Answer 1

您的代码有效，因为我认为为什么您看不到.log（）的问题是因为您没有达到它。

如果卷轴是（如您所说）“设备的1％ScreenHeight”，则需要HTML高度〜3倍您的屏幕高度；

document.documentElement.style.height = "300vh";

// getting 1% of screen height
const scrollHeight = screen.height / 100; 
const scrollTriggerPoint = scrollHeight * 150;

let point1 = false;

document.addEventListener("scroll", (e) => {
  if (document.documentElement.scrollTop >= scrollTriggerPoint) {
    if (point1 == false){
        point1 = true;
        point1F();
    };
  }
});

function point1F() {
  console.log("u've done it");
}

PS

不要使用以大写字母开头的变量/函数的名称，请在; y上用于构造函数函数或类。

Answer 2

交叉点观察者API

使用滚动位置时，当您具有单个触发点时，可以使用滚动位置。但是，当有多个触发点（如问题所示）并且它们在不同设备上的位置不一致时，则相交观察者API 是一个有用的解决方案。

mdn：

过去涉及的事件实施相交检测
处理程序和循环呼叫方法类似
element.getBoundingClientRect（）来构建所需的信息
每个元素都受到影响。由于所有这些代码都在主线程上运行，因此
甚至其中之一也会引起性能问题。当一个网站是
有了这些测试，事情可能会变得彻头彻尾。

您可以在文档或容器元素上创建一个观察者，然后添加要观看的元素。当元素达到阈值设置时，触发回调。

演示片段

摘要显示了如何在滚动进出时观察到不同的部分。

// create an observer on the document or container element

let observer = new IntersectionObserver(([entry]) => {
  if (entry.isIntersecting) {

    // code to execute when the section becomes visible

    console.log("is visible: " + entry.target.id);
    
    // uncomment to trigger only once per section
    // observer.unobserve(entry.target); 
  }
}, {
  root: document,  // or container element or null
  rootMargin: "0px",
  threshold: 0.1
});

// add each section to the observer

document.querySelectorAll("section").forEach(target => {
  observer.observe(target);
});

section {
  height: 5em;
  margin: 1em;
  margin-bottom: 20em;
  background-color: lightblue;
}

Scroll down the page to trigger the observer

<section id="section1">Section 1</section>
<section id="section2">Sectopm 2</section>
<section id="section3">Section 3</section>
<section id="section4">Section 4</section>
<section id="section5">Section 5</section>