我需要制作类似于Windows 8的Metro风格水平滚动的东西。例如，当用户在角落移动鼠标时，滚动条随之移动。
我试过这段代码：
$(document).ready(function() {
document.documentElement.onmousewheel = function (event) {
$('body').scrollLeft($('body').scrollLeft() - event.wheelDelta);
};
});
但水平滚动并不像我期望的那样完全正常工作。
我该如何制作Windows 8风格的水平滚动？
答案 0 :(得分：1)
检查jquery插件jcarousel：
http://sorgalla.com/projects/jcarousel/examples/static_auto.html
答案 1 :(得分：1)
我找到了答案：
要获得水平滚动，Brandon Aaron（GitHub，下载）的鼠标滚轮插件将用于检测鼠标滚轮的动作，如按键，当然，jQuery本身也会被使用。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jquery.mousewheel.js"></script>
的Javascript
$(document).ready(function() {
$('html, body, *').mousewheel(function(e, delta) {
this.scrollLeft -= (delta * 40);
e.preventDefault();
});
})
可以将JavaScript添加到Head标记中。请注意，滚动适用于html，body和*（所有内容） - 这使它可以在不同的浏览器中工作。 event.preventDefault（）只是禁用垂直滚动。
答案 2 :(得分：0)
你可以尝试http://jscrollpane.kelvinluck.com/，支持水平和垂直滚动，并且很容易设计样式并支持不同的缓动过渡。
答案 3 :(得分：0)
<div class="hScroll">
<div class="content">
<!-- your content -->
</div>
</div>
<强> CSS
.hScroll {
position: relative;
width: 99999em;
height: 100%;
}
.content {
position: relative;
width: auto;
height: 100%;
float:left;
}
<强>的Javascript
$(document).ready(function (){
$('.hScroll').width($('.content').outerWidth());
});
document.documentElement.onmousewheel = function (event) {
$('body').scrollLeft($('body').scrollLeft() - event.wheelDelta);
event.preventDefault();
};