Question

我在HTML文件中有2个滚动条。滚动条a较短，滚动条b较大。在滚动条a中滚动到达末尾时，滚动条b聚焦并开始滚动。如何避免这种影响？我希望将鼠标悬停在滚动条上时，仅由该滚动条a而不是b来处理。

document.getElementById('left').onmousewheel = function(e, d) { 
   if((this.scrollTop === (this.scrollHeight - this.offsetHeight) && d < 0)
    || (this.scrollTop === 0 && d > 0)) {
     e.preventDefault();
   }
}

html, body { height: 100vh; margin: 0; }

.container {
  width: 100vw;
  height: 100vh;
  background: aqua;
  margin: auto;
  padding: 1px;
}

#right {
  margin-left: 20vw;
  height: 200vh;
  background: yellow; 
}

.static {
  height: 50px;
  background: green;
}

#left {
  width: 20vw;  
  background: red;
  float: left;
  position: fixed;
}

#middle {
  height: calc(100vh - 15px);
  overflow-y: scroll;
}

<section class="container">
  <div id="left">  
    <div id="middle">
      <h2>Left</h2>
      <p style="height: 9001px;">Lorem ipsum</p>
      <p>Lorem ipsum</p>
    </div>  
  </div>
  <div id="right" class="scroll">
    <h2>Right</h2>
    <p style="height: 300px;">Lorem ipsum</p>
    <p>Lorem ipsum</p>
  </div>
</section>

在left中滚动时，将鼠标保持在left上，然后再次开始滚动。right将开始滚动。我试图猜测是否只能使用CSS才能做到这一点，因为我正试图避免使用Javascript。

谢谢！

Answer 1

当内部元素滚动的位置到达底部时，您必须防止父事件的滚动。

document.getElementById('left').onmousewheel = function(e, d) { 
   if((this.scrollTop === (this.scrollHeight - this.offsetHeight) && d < 0)
    || (this.scrollTop === 0 && d > 0)) {
     e.preventDefault();
   }
}

或者您可以在CSS下方添加

section {  
 overscroll-behavior: none;
}

如何避免滚动条堆叠

1 个答案: