こんにちは私はメトロスタイルアプリの概念実証を作成しようとしていました。これは私のコードです:
<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); "しかし、これはスクロールではありません。
メトロの問題は何ですか?水平スクロールを行う他の方法はありますか?
ありがとうございました