我尝试了很多在网上找到的解决方案。没有工作。当我垂直滚动时，我试图让网站水平滚动。我试图通过 js 来完成这个 - 什么都没有。然后我读到我应该能够简单地使用 css 来做到这一点。再次 - 什么都没有。这是现在的代码:
<style type="text/css">
#b {
width:100%;
height:100vh;
white-space:nowrap;
position:fixed;
left:0;
top:0;
font-size:0;
overflow-x:auto;
}
#b img {
width:auto;
height:100%;
}
</style>
</head>
<body>
<div id="b">
<img src="a.jpg"/>
<img src="b.jpg"/>
</div>
</body>
怎么了？/我能做什么？
最佳答案
所选答案在我的浏览器 (FireFox) 中不起作用。
Here是我已经很好地工作的解决方案。
HTML:
<body>
<div id="b">
<div class="img_holder">
<img/>
<img/>
<img/>
<img/>
<img/>
<img/>
<img/>
<img/>
</div>
</div>
</body>
滚动时，实际上是在 #b 中左右移动 .img_holder。此方法要求 .img_holder 与您将放置在其中的图像的总和以及所有填充和边距一样宽(或更宽)。 #b 是要在页面上查看的所需宽度。
CSS:
#b {
width: 400px;
border: 1px solid #111;
padding: 0px;
margin: 0px;
overflow-x: scroll;
overflow-y: hidden;
}
.img_holder {
padding: 0px;
margin: 0px;
height: 100px;
width: 910px;
}
img {
height: 90px;
width: 100px;
padding: 5px;
background: #123;
display: inline-block;
}
JavaScript:
var scroller = {};
scroller.e = document.getElementById("b");
if (scroller.e.addEventListener) {
scroller.e.addEventListener("mousewheel", MouseWheelHandler, false);
scroller.e.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
} else scroller.e.attachEvent("onmousewheel", MouseWheelHandler);
function MouseWheelHandler(e) {
// cross-browser wheel delta
var e = window.event || e;
var delta = - 20 * (Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))));
var pst = $('#b').scrollLeft() + delta;
if (pst < 0) {
pst = 0;
} else if (pst > $('.img_holder').width()) {
pst = $('.img_holder').width();
}
$('#b').scrollLeft(pst);
return false;
}
确保您使用条件来停止滚动到零以下和容器的最大宽度以上(代码底部附近的 if 条件)。此外，滚动时的 delta 值非常小，因此为了防止用户不得不滚动一堆，我将它乘以 20。您可以选择任何您想要调整滚动的值速度。
如果你想隐藏水平滚动条也能很好地工作:
#b {
overflow-x:hidden:
}
如图here
关于javascript - 在带有图像的某些 div 中水平滚动而不是垂直滚动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21223515/