嗨,我正在尝试为我的地铁风格应用程序进行概念验证.
这是我的代码：
这是我的代码：
<html>
<head>
<script src="jquery.min.js"></script>
</head>
<body style="height: 600px">
<div id="wrapper" style="width:10000px">
<div class="child" style="float: left; width: 200px; border-style: solid;">Left Stuff</div>
<div class="child" style="float: left; width: 200px; border-style: solid;">Middle Stuff</div>
<div class="child" style="float: left; width: 200px; border-style: solid;">Right Stuff</div>
<div class="child" style="float: left; width: 200px; border-style: solid;">Right Stuff</div>
<div class="child" style="float: left; width: 200px; border-style: solid;">Right Stuff</div>
<div class="child" style="float: left; width: 200px; border-style: solid;">Right Stuff</div>
<div class="child" style="float: left; width: 200px; border-style: solid;">Right Stuff</div>
<div class="child" style="float: left; width: 200px; border-style: solid;">Right Stuff</div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function() {
$("#wrapper").wrapInner("<table cellspacing='30'><tr>");
$(".child").wrap("<td></td>");
document.documentElement.onmousewheel = function (event) {
$('body').scrollLeft($('body').scrollLeft() - event.wheelDelta);
};
});
</script>
mousewheel事件在IE10(Windows 8)中工作正常,所以我创建了一个html5 javascript metro风格的应用程序,只包含2个文件：带有上述代码的default.html文件和jquery.min.js文件.
在运行应用程序时,我有相同的显示,但使用鼠标滚轮时,水平滚动不起作用,就像在10中工作一样.
注意：在Metro中捕获mousewheel事件(在此行上放置一个断点“$(‘body’).scrollLeft($(‘body’).scrollLeft() – event.wheelDelta);”但这不是滚动.
metro有什么问题,还有其他方法可以进行水平滚动.
谢谢
解决方法
你快到了.使用.win-horizontal而不是#wrapper.这对我有用.
谢谢JulianaPeña.
