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

【问题标题】：Is it possible to change what happens upon hover to scroll?是否可以更改悬停滚动时发生的情况？
【发布时间】：2020-12-20 07:12:20
【问题描述】：

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>

【问题讨论】：

请添加与您的问题相关的任何代码。
请添加一些代码..以便我们可以帮助您
我已添加代码，请查看。 @DreamHunter-hashADH
我已添加代码，请查看@dalelandry
把代码放到一个可运行的sn-p中

标签： javascript html jquery css web-frontend

【解决方案1】：

我用你的代码给你做了一个例子，我用cmets的形式解释了一切。

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>

【讨论】：