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

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