在具有图像的特定div中水平滚动而不是垂直滚动？ [英] Scroll horizontally instead of vertically in certain div with images?
问题描述
我尝试过许多在网络上找到的解决方案。没有工作。我试图使网站水平滚动，当我垂直滚动。我试图通过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） b
$ b
这里是一个解决方案，我已经得到了很好的工作。
HTML ：
< ; body>
< div id =b>
< div class =img_holder>
< img />
< img />
< img />
< img />
< img />
< img />
< img />
< img />
< / div>
< / div>
< / body>
滚动时，你实际上是移动 .img_holder 左侧和右侧 #b 。这个方法要求 .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）{
//跨浏览器轮毂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'）。
}
$（'＃b'）。scrollLeft（pst）;
return false;
}
确保使用条件停止滚动零以下容器的宽度（如果条码靠近底部）。此外，滚动时的 delta 值非常小，所以为了防止用户滚动一堆我已经乘以20.你可以选择任何值
如果您想隐藏水平滚动条，也可以很好地工作：
#b {
overflow-x：hidden：
}
如这里所示
I tried many solutions I found on the web. None worked. I'm trying to make a website scroll horizontally when I'm scrolling vertically. I tried to accomplish this via js - nothing. Then I read that I should be able to do this simply using css. Again - nothing. Here's the code as it is right now:
<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>
What is wrong? / What can I do?
The selected answer doesn't work in my browser (FireFox).
Here is a solution I've gotten to work pretty nicely.
HTML:
<body>
<div id="b">
<div class="img_holder">
<img/>
<img/>
<img/>
<img/>
<img/>
<img/>
<img/>
<img/>
</div>
</div>
</body>
When you scroll, you are essentially moving .img_holder left and right within #b. This method requires that .img_holder is as wide (or wider) than the sum of the images you'll be placing in it, as well as all the padding and margins. #b is the desired width to be viewed on the page.
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;
}
Make sure that you use conditions to stop from scrolling below zero and above the max width of the container (if conditions near bottom of code). Also, the delta value when scrolling is very small, and so to prevent the user from having to scroll a bunch I've multiplied it by 20. You can choose any value you'd like to adjust scrolling speed.
Also works nicely if you want to hide the horizontal Scroll Bar:
#b {
overflow-x:hidden:
}
As shown here
这篇关于在具有图像的特定div中水平滚动而不是垂直滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
