Question

我在网站的可滚动区域上有一个绝对定位的元素。单击此元素将向下滚动页面；适用于带有chromebook的学生，这些chromebook隐藏了滚动条，并且无法提供良好的触摸板滚动体验。

但是，如果用户（在Chrome上）正在手动滚动，并且光标在绝对定位的按钮上滑动，则该页面将完全停止滚动。我希望页面在光标悬停在按钮上方时“正常”滚动。

捕获车轮事件，然后进行新的车轮事件并将其分派到可滚动的内容不起作用，我相信是因为.isTrusted是错误的。

作为一种解决方法，我捕获了wheel事件并在可滚动元素上手动调用.scrollBy。但是，这不会将页面滚动相同的距离，还会导致滚动混乱，结结巴巴。

elemScrollImg.addEventListener('wheel', (e) => {
      console.log("Img scroll: ", e)
      let deltaY = e.deltaY
      // Wanted to make a new WheelEvent to pass to the container
      // but isTrusted is false for "fake" events, and the page
      // apparently just ignores them :-/
      // https://stackoverflow.com/a/44462125
      elemContent.scrollBy({
        top: deltaY,
        left: 0,
        // smooth scrolling apparently just makes it all worse,
        // esp. on touchpad scrolling.
        // behavior: 'smooth',
      })

https://jsfiddle.net/seatag/a8m1kw20/58/

是否有推荐的方法来实现这一目标？

Answer 1

我使用position: sticky结束了将按钮放置在可滚动容器内的操作，这可以使轮子事件正常起泡。这不能回答我的问题，但是可以解决我的问题。

.arrowWrapper {
  position: sticky;
    bottom: 15px;
    padding: 6px;
    padding-bottom: 15px;
    width: 200px;
    margin-left: auto;
    margin-right: auto;
    cursor: pointer;
    background: #f00;
}

https://jsfiddle.net/seatag/yb02c4sa/8/

如何将滚轮或滚动事件从一个元素转移到另一个元素？

1 个答案: