4

嗨，我正在尝试为我的 Metro 风格应用程序进行概念验证。这是我的代码：

<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 文件。

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

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

谢谢

4

2 回答 2

1

您快到了。使用 .win-horizo​​ntal 而不是你的#wrapper。这对我有用。

在以下位置找到答案：http ://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/3b4e4ffa-3d27-4d34-810b-03311fac03e8

谢谢你朱莉安娜佩尼亚。

于 2012-06-04T22:35:12.137 回答
0

实际上，您所显示的所有代码都是添加 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();
    };
});

于 2013-08-25T14:37:48.070 回答