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 mousewheel插件才能工作。：）

＆＃13;

$(function() {

   $("body").mousewheel(function(event, delta) {

      this.scrollLeft -= (delta * 30);
    
      event.preventDefault();

   });

});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

你只需要改变体型

body {
  margin: 0;
  display: block;
}

Answer 3

我认为您可能在页面中遗漏了一些js文件。确保添加

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://css-tricks.com/examples/HorzScrolling/jquery.mousewheel.js"></script>
<script>
$(function(){
    $("#page-wrap").wrapInner("<table cellspacing='30'><tr>");
    $(".post").wrap("<td></td>");
    $("body").mousewheel(function(event, delta) {
        this.scrollLeft -= (delta * 30);
        event.preventDefault();
    });
});
</script>

这是一个带有工作示例的JSFiddle https://jsfiddle.net/ybvsyt0p/

Answer 4

我认为将JavaScript与CSS结合使用会产生您需要的“水平滚动”效果：定义HTML和BODY，因为选择器使用像“mousewheel”这样的基本方法，并注意this的位置和范围，因为它通过鼠标滚轮引用其父对象（页面）。 delta可用于处理与用户交互一致的值，scrollLeft是CSS 2中的属性，CSS 3中的方法（即，scrollLeft()适用于大多数浏览器。

$("html, body").mousewheel(
        function
                (event, delta) {
                      this.scrollLeft *= -30;
                 }
  )

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

4 个答案: