首页css鼠标滚轮横向滚动条

css鼠标滚轮横向滚动条

时间: 2024-01-04 19:18:37 浏览: 161

以下是使用CSS实现鼠标滚轮横向滚动条的方法： 1.首先，需要将页面的overflow-x属性设置为scroll，这样才能出现横向滚动条。 2.然后，需要使用CSS的scroll-snap-type属性来定义滚动的“吸附点”，这样滚动条才能在吸附点停止。 3.最后，需要使用JavaScript来监听鼠标滚轮事件，并根据滚动方向来改变页面的scrollLeft值，从而实现横向滚动条的效果。以下是具体的代码实现： ```html <style> body { overflow-x: scroll; scroll-snap-type: x mandatory; scroll-behavior: smooth; white-space: nowrap; } section { display: inline-block; width: 100vw; height: 100vh; scroll-snap-align: start; } </style> <body> <section style="background-color: red;"></section> <section style="background-color: blue;"></section> <section style="background-color: green;"></section> <section style="background-color: yellow;"></section> <section style="background-color: purple;"></section> </body> <script> window.addEventListener('wheel', function(e) { if (e.deltaY > 0) { window.scrollBy(100, 0); } else { window.scrollBy(-100, 0); } }); </script> ```

阅读全文