我用三个部分制作了这个页面,这些部分具有完整的宽度和高度,但我不知道如何让它们水平滚动并且不是垂直,我试过这个来源: 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>
最佳答案
水平滚动按预期工作,请检查下面的代码。根据您的引用,该演示使用了一个 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>
关于javascript - 我必须添加什么 javascript 代码才能使此 div 水平滚动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38286962/