css 使用鼠标滚轮水平滚动，直到元素结束，然后切换到垂直

w8biq8rn 于 2023-03-20 发布在其他

关注(0)|答案(1)|浏览(150)

所以我有一个页面的一部分，一旦你垂直滚动到它，它就像一个博客滑块，你可以使用鼠标滚轮/触控板水平滚动。我想实现的最终解决方案是启用垂直滚动，一旦用户已经到达滑块的末端。下面是我的代码：

<div id="post-wrapper">
  <p>Post 1</p>
  <p>Post 2</p>
  <p>Post 3</p>
  <p>Post 4</p>
  <p>Post 5</p>
  <p>Post 6</p>
</div>

<style>
 #post-wrapper {
  display: flex;
  overflow-x: scroll;
  max-width: 100rem;
  margin: 0 auto;
 }

 #post-wrapper p {
  font-family: sans-serif;
  border-radius: 8px;
  background: #c2d8db !important;
  color: white;
  padding: 10rem 15rem;
  margin: 2rem 1rem;
 }
</style>

<script>
const postScroll = document.getElementById("post-wrapper");
postScroll.addEventListener('wheel', (event) => {
  postScroll.scrollBy({
    left: event.deltaY < 0 ? -70 : 70,
  });
        event.preventDefault();
});
</script>

除了尝试使用纯css复制它之外，我没有尝试过其他任何方法，这是一场噩梦，我知道有很多类似的解决方案，但没有一个显示一旦到达终点如何恢复垂直滚动。

css

来源：https://stackoverflow.com/questions/75772361/horizontal-scrolling-with-mouse-wheel-until-the-end-of-element-then-switch-to-v

1条答案

按热度按时间

ars1skjm1#

尝试使用变量scrollingHorizontally来跟踪我们当前是水平滚动还是垂直滚动，将其设置为true以指示我们正在水平滚动并执行滚动逻辑。
看看这个例子...

const postScroll = document.getElementById("post-wrapper");
let scrollingHorizontally = true;

postScroll.addEventListener("wheel", (event) => {
  if (scrollingHorizontally) {
    postScroll.scrollBy({
      left: event.deltaY < 0 ? -70 : 70,
    });
    event.preventDefault();

    // check if the user has reached the end of the slider
    if (postScroll.scrollLeft >= postScroll.scrollWidth - postScroll.clientWidth) {
      scrollingHorizontally = false;
      postScroll.style.overflowY = "auto";
    }
  } else {
    // (scroll the page up/down)
    return true;
  }
});

希望这能有所帮助...

赞(0）回复(0）举报 2023-03-20

我来回答

css 使用鼠标滚轮水平滚动，直到元素结束，然后切换到垂直

1条答案

相关问题

热门标签

最新问答