无限滚动在谷歌浏览器中剧烈滚动/滑动

Question

我有一个无限滚动框。有一个项目列表，当列表向上滚动时，项目会从底部附加，反之亦然。当用户正常向下或向上滚动时，它会按预期工作。当他们使用笔记本电脑触控板或在屏幕上用足够的力量滚动时，滚动条会到达顶部，用户需要再次向下滚动才能工作。有办法解决这个问题吗？

这是我正在尝试做的事情的 codepen 链接。似乎它不会在 codepen 中加载时向下滚动（这不是问题，所以请忽略），请向下滚动一点以使其正常工作。当我使用笔记本电脑触控板或触摸屏时，我可以产生所描述的行为，我向下滑动以使列表向上移动。希望这不会令人困惑 - 基本上我希望滚动条永远不会到达顶部，无论用户滚动/滑动有多努力。

let container = document.querySelector('.calendar-container')
let calendar = document.querySelector('.calendar')

container.addEventListener('scroll', function (event) {

  const factor = container.scrollTop / (container.scrollHeight - container.offsetHeight);
  if(factor < 0.4) {
      let move = calendar.querySelector(':last-child')
      move.remove();
      calendar.prepend(move);
  } else if(factor > 0.6) {
      let move = calendar.querySelector(':first-child')
      move.remove();
      calendar.append(move);
  }

});

calendar.scroll(0,100);

根据评论，目前这只是 chrome 中的问题

Answer 1

好吧，我找到了一个 hacky 解决方案，但如果其他人有更好的解决方案，我会开放查看其他人，只需将其添加到滚动事件的末尾

  if (document.querySelector('.calendar-container').scrollTop < 10) {
      document.querySelector('.calendar-container').scroll(0,150)
   }

});

let container = document.querySelector('.calendar-container')
let calendar = document.querySelector('.calendar')

container.addEventListener('scroll', function(event) {

  const factor = container.scrollTop / (container.scrollHeight - container.offsetHeight);
  if (factor < 0.4) {
    let move = calendar.querySelector(':last-child')
    move.remove();
    calendar.prepend(move);
  } else if (factor > 0.6) {
    let move = calendar.querySelector(':first-child')
    move.remove();
    calendar.append(move);
  }
  if (document.querySelector('.calendar-container').scrollTop < 10) {
    document.querySelector('.calendar-container').scroll(0, 150)
  }
});

calendar.scroll(0, 100);

* {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.calendar-container {
  height: 300px;
  width: 500px;
  text-align: center;
  overflow: hidden;
  overflow-y: scroll;
}

::-webkit-scrollbar {
  /* width: 0px;
  background: transparent;  */
}

.calendar {
  padding: 0;
}

.calendar-container li {
  display: inline-block;
  width: 80%;
  order: 5;
  height: 50px;
  margin-top: 1px;
  border-radius: 10px;
  background: #eee;
  font-size: 20px;
}

<div class="container">
  <div class="calendar-container">

    <ul class="calendar">

      <li class="calendar-hour" data-date="" data-hour="0"></li>
      <li class="calendar-hour" data-date="" data-hour="1"></li>
      <li class="calendar-hour" data-date="" data-hour="2"></li>
      <li class="calendar-hour" data-date="" data-hour="3"></li>
      <li class="calendar-hour" data-date="" data-hour="4"></li>
      <li class="calendar-hour" data-date="" data-hour="5"></li>
      <li class="calendar-hour" data-date="" data-hour="6"></li>
      <li class="calendar-hour" data-date="" data-hour="7"></li>
      <li class="calendar-hour" data-date="" data-hour="8"></li>
      <li class="calendar-hour" data-date="" data-hour="9"></li>
      <li class="calendar-hour" data-date="" data-hour="10"></li>
      <li class="calendar-hour" data-date="" data-hour="11"></li>
      <li class="calendar-hour" data-date="" data-hour="12"></li>
      <li class="calendar-hour" data-date="" data-hour="13"></li>
      <li class="calendar-hour" data-date="" data-hour="14"></li>
      <li class="calendar-hour" data-date="" data-hour="15"></li>
      <li class="calendar-hour" data-date="" data-hour="16"></li>
      <li class="calendar-hour" data-date="" data-hour="17"></li>
      <li class="calendar-hour" data-date="" data-hour="18"></li>
      <li class="calendar-hour" data-date="" data-hour="19"></li>
      <li class="calendar-hour" data-date="" data-hour="20"></li>
      <li class="calendar-hour" data-date="" data-hour="21"></li>
      <li class="calendar-hour" data-date="" data-hour="22"></li>
      <li class="calendar-hour" data-date="" data-hour="23"></li>
    </ul>
  </div>
</div>