javascript - 我必须添加什么 javascript 代码才能使此 div 水平滚动？

Question

我用三个部分制作了这个页面，这些部分具有完整的宽度和高度，但我不知道如何让它们水平滚动并且不是垂直，我试过这个来源: CSS-tricks: Horizontal scrolling但它不适用于我的代码...

这是我的代码:

html, body {
  height: 100%;
}
body {
  margin: 0;
  display: flex;
}
.element {
  flex: 0 0 100%;
}
.element1 { background: pink; }
.element2 { background: lightgreen; }
.element3 { background: lightblue; }

<div class="element element1">Element #1</div>
<div class="element element2">Element #2</div>
<div class="element element3">Element #3</div>

Answer 1

水平滚动按预期工作，请检查下面的代码。根据您的引用，该演示使用了一个 jquery 插件。你需要包含 jQuery 和 jQuery 鼠标滚轮插件才能工作。 :)

$(function() {

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

      this.scrollLeft -= (delta * 30);
    
      event.preventDefault();

   });

});

html, body {
  height: 100%;
}
body {
  margin: 0;
  display: flex;
}
.element {
  flex: 0 0 100%;
}
.element1 { background: pink; }
.element2 { background: lightgreen; }
.element3 { background: lightblue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.js"></script>

<div class="element element1">Element #1</div>
<div class="element element2">Element #2</div>
<div class="element element3">Element #3</div>