admin管理员组

文章数量:1334190

I am using full section scrolling using scroll snapping. If I scroll through touchpad, it is smooth. But if I use mouse and make the scroll wheel scroll just a bit, then it scrolls with jerk/speed.

I have searched through various stack overflow posts related to this but it did not help. They told to use scroll-behavior: smooth; for solving the mouse scroll with jerk. But none of the solutions worked. Can anyone help me to solve this problem. Also I tried to do it using pure js but it was getting problematic one or the other way.

Here is the codepen link of the same code:

.scroll-container {
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  height: 100vh;
  overflow-y: scroll;
  scrollbar-width: none;
}

.scroll-area {
  height: 100vh;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background-color: red;
}

.scroll-container,
.scroll-area {
  margin: 0 auto;
}

.scroll-area:nth-child(1) {
  background-color: red;
}

.scroll-area:nth-child(2) {
  background-color: blue;
}

.scroll-area:nth-child(3) {
  background-color: green;
}

.scroll-area:nth-child(4) {
  background-color: black;
}
<div class="scroll-container">
  <div class="scroll-area">1</div>
  <div class="scroll-area">2</div>
  <div class="scroll-area">3</div>
  <div class="scroll-area">4</div>
</div>

本文标签：

版权声明：本文标题：css - Scroll snapping doesn&#39;t work well with mouse. Using mouse, the page gets scrolled abruptly - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742310070a2450688.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。