无限滚动捕捉在谷歌Chrome大力滚动/滑动

我有一个无限滚动框。有一个项目列表，当列表向上滚动时，项目会从底部追加，向下滚动时反之亦然。当用户正常向下或向上滚动时，它会按预期工作。当他们用笔记本电脑触控板或在屏幕上用足够的力量滚动时，然后滚动条到达顶部，用户需要再次向下滚动才能正常工作。2有什么方法可以解决这个问题吗？
这里有一个codepen link我试图做什么。似乎它不会在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中的一个问题

好吧，我发现了一个黑客解决方案，但将开放，看看其他人，如果有人有更好的解决方案，只是将此添加到滚动事件的末尾

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>

无限滚动捕捉在谷歌Chrome大力滚动/滑动

1条答案

相关问题

热门标签

最新问答