是否可以将悬停时发生的情况更改为滚动

Question

请查看此图像就像在图像中一样，我制作了一个边框，它应该在向上滚动时向上移动20px，在向下滚动时向下移动20px。同样的事情已经通过悬停完成了，但我不能在滚动时完成。是否可以将悬停时发生的情况更改为滚动？？代码可以在下面找到；

#menu-container div{
height: 415px;
width: 52%;
border:1.5px solid black;
background:transparent;
left: 170px;
-webkit-transition: all 10s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.9s linear;
position: relative;
transition-delay: 0.2s;
margin-top: -120px;
}
#divi:hover{
background:transparent;
left: 220px;
/*  top:35px;*/
padding-left: -20px;
}
.menu2:hover{
background:transparent;
left: 70px !important;
/*  top:-80px;*/
padding-left: -200px;
}

<div id="menu-container" >
<div id="divi">  <div class="menu2" style="margin-top: 30px; margin-left: -115px; width:100%"></div></div>

</div>
<!--   <div class="menu2" style="margin-top: -399px; margin-left: 45px;"></div> </div> -->
<img class="ay" <a href="https://imgbb.com/"><img src="https://i.ibb.co/YTTxKc9/ab.png" width="275px" height="auto" style="margin-top: -400px; margin-left: 200px  "> </img>

Answer 1

我用代码给你举了一个例子，我以注释的形式解释了一切。

let cont = document.querySelector(".container")
const maxScrollTop = 395;
// onscroll property of html elements
cont.onscroll = () => {
// your two borders
let divi = document.querySelector("#divi");
let menu = document.querySelector(".menu2");
// the math, it semes complicated but not really
/* it just maps the scrollTop value between the values that we want (between 0 and 50 with the divi and between 50 and 200 with the menu) */
divi.style.left = `${50 - ((cont.scrollTop / maxScrollTop) * 50)}px`;
menu.style.left = `${50 + ((cont.scrollTop / maxScrollTop) * (200 - 50))}px`;

};

.container{
height: 200px;
overflow-y: scroll;
}
/* I made it a bit bigger for better presentation */
#menu-container div{
height: 560px;
width: 450px;
border: 1.5px solid black;
background: transparent;
left: 50px;
-webkit-transition: all 10s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.9s linear;
position: relative;
transition-delay: 0.2s;
margin-bottom: -160px;
}
/* this is your hover code */
/* #divi:hover{
background: transparent;
left: 220px;

/* top: 35px; 
padding-left: -20px;
}
.menu2:hover{
background: transparent;
left: 70px !important;

/* top: -80px; 
padding-left: -200px;
} */

<!-- we need the container so the this is what we scroll not the iframe in the snipet, which I don't know if we can reach -->
<div class="container">
<div id="menu-container" >
<div id="divi">  
<div class="menu2" style="margin-top: 30px; margin-left: -115px; width:100%">
</div>
</div>   
</div>
<img src="https://i.ibb.co/YTTxKc9/ab.png" width="450px" height="auto" style="margin-top: -400px; margin-left: 50px  "/>  
</div>