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

Question

Please view this image如图所示，我制作了一个边框，它应该在向上滚动时向上移动 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>

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

Is it possible to change what happens upon hover to scroll?

javascript

html

jquery

css

web-frontend