用于增加价值 onscroll 的 Java 脚本？

问题描述

我想创建一个脚本，在其中我想在向下滚动页面时增加图像的顶部边距，反之亦然，但我不知道将事件侦听器放在哪里。

所以，当向下滚动页面时，图像会随着滚动而移动并在绿色 div 之前停止。

document.getElementById("body").addEventListener("scroll",myFunction);
    function myFunction() 
    {
        console.log('scrolled');
    }

#body{
width:100%;
height:3000px;
}
#yellowdiv
{
width:100%;
height:1000px;
background-color: yellow;
}
#image
{
width:50%;
height:500px;
border: 10px solid black;
}
#bluediv
{
width:100%;
height:1000px;
background-color: blue;
}
#pinkdiv
{
width:100%;
height:1000px;
background-color: pink;
}
#greendiv
{
width:100%;
height:1000px;
background-color: green;
}

<div id="body">
    <div id="yellowdiv">
        <img id="image"src="#">
    </div>
    <div id="bluediv">
    </div>
    <div id="pinkdiv">
    </div>
    <div id="greendiv">
    </div>
</div>

P.S - JS 新手

提前致谢。

解决方法

您正在尝试将事件处理程序附加到 #body div，但您不是在滚动 div，而是在滚动 window。

如果要将滚动事件处理程序附加到 div，它必须是可滚动的。您可以在下面找到一个带有包装 div #scrollable 的示例，并且事件处理程序已附加到它。

document.getElementById("scrollable").addEventListener("scroll",myFunction);

function myFunction() {
  console.log('scrolled');
}

#scrollable {
  height: 100px;
  overflow-y: auto;
}

#body {
  width: 100%;
  height: 3000px;
}

#yellowdiv {
  width: 100%;
  height: 1000px;
  background-color: yellow;
}

#image {
  width: 50%;
  height: 500px;
  border: 10px solid black;
}

#bluediv {
  width: 100%;
  height: 1000px;
  background-color: blue;
}

#pinkdiv {
  width: 100%;
  height: 1000px;
  background-color: pink;
}

#greendiv {
  width: 100%;
  height: 1000px;
  background-color: green;
}

<div id="scrollable">
  <div id="body">
    <div id="yellowdiv">
      <img id="image" src="#">
    </div>
    <div id="bluediv">
    </div>
    <div id="pinkdiv">
    </div>
    <div id="greendiv">
    </div>
  </div>
</div>