4

こんにちは私はメトロスタイルアプリの概念実証を作成しようとしていました。これは私のコードです:

<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)で正常に機能しているため、上記のコードを含むdefault.htmlファイルとjquery.min.jsファイルの2つのファイルのみを含むhtml5javascriptメトロスタイルアプリケーションを作成しました。

アプリケーションを実行すると同じ表示になりましたが、マウスホイールを使用すると、IE 10のように水平スクロールが機能しませんでした。注:マウスホイールイベントはMetroでキャプチャされます(この行にブレークポイントを設定します "$('body')。scrollLeft( $('body')。scrollLeft()--event.wheelDelta); "しかし、これはスクロールではありません。

メトロの問題は何ですか?水平スクロールを行う他の方法はありますか?

ありがとうございました

4

2 に答える 2

1

もうすぐです。#wrapperの代わりに.win-horizo​​ntalを使用してください。これは私のために働いた。

答えは次の場所にあります: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 に答える