use*_*719 2 html javascript css jquery
我尝试了很多在网上找到的解决方案.没有用.当我垂直滚动时,我正试图让网站水平滚动.我试图通过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)中不起作用.
这是一个我已经很好地工作的解决方案.
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) {
// 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:
}
如图所示这里