Question

我正在努力获取在网站上实现的水平滚动，以从垂直切换为水平，反之亦然。

我基本上想要的是：如果水平滚动部分位于页面顶部，则应该开始水平滚动，如果位于末尾，则应该再次垂直滚动。如何修改我的代码以获得这种行为。

我正在使用jquery.mousewheel.min.js

$(".side_scroll").mousewheel(function(event, delta) {

  this.scrollLeft -= (delta * 10);

  event.preventDefault();

});

.side_scroll {
  display: flex;
  width: 100vw;
  height: 100vh;
  overflow-x: scroll;
  overflow-y: hidden;
}

.side_scroll::-webkit-scrollbar {
  display: none
}

.scroll_element {
  height: 100vh;
  width: 100vw;
  min-width: 100vw;
  border: solid 1px black;
}

.full {
  height: 100vh;
  width: 100vw;
  background: gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/jquery/jquery-mousewheel/master/jquery.mousewheel.min.js"></script>

<div class="full">Header</div>
<div class="side_scroll">
  <div class="scroll_element">Section 1</div>
  <div class="scroll_element">Section 2</div>
  <div class="scroll_element">Section 3</div>
</div>
<div class="full">Footer</div>

Answer 1

如果我了解您的要求，则希望能够向下滚动到side-scroll部分，一旦到达水平滚动的右端，您希望它继续垂直向下滚动到页脚。或者，如果它在左侧，并且用户向上滚动鼠标滚轮，它会升至标题，而不是保持静止。该CodePen可以捕获您所需的内容，您可以根据需要进行更改：https://codepen.io/anon/pen/pYpqeJ

如何在某些点启用垂直和水平鼠标滚轮滚动

1 个答案: