Question

您好我正在尝试为我的地铁风格应用做出概念验证。这是我的代码：

<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>

鼠标滚轮事件在IE10（Windows 8）中工作正常，所以我创建了一个html5 javascript metro风格的应用程序，只包含2个文件：带有上述代码的default.html文件和jquery.min.js文件。

当运行应用程序时，我有相同的显示，但使用鼠标滚轮时，水平滚动不起作用，就像在10中工作一样。注意：在Metro中捕获mousewheel事件（在此行上放置一个断点“$（'body'）。scrollLeft（$（'body'）。scrollLeft（） - event.wheelDelta）;”但这不是滚动。

metro有什么问题，还有其他方法可以进行水平滚动。

谢谢

Answer 1

你快到了。使用.win-horizontal而不是#wrapper。这对我有用。

在http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/3b4e4ffa-3d27-4d34-810b-03311fac03e8

找到答案

谢谢JulianaPeña。

Answer 2

实际上，您显示的所有代码都是添加event.preventDefault（）;停止默认的垂直滚动。

<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);
        event.preventDefault();
    };
});

使用鼠标滚轮的Metro风格应用程序水平滚动

2 个答案: