Metro風格的應用程序水平滾動使用鼠標滾輪

嗨，我試圖做出我的地鐵風格的應用程序的概念證明。這是我的代碼：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>

鼠標滾輪事件在IE10工作正常（Windows 8中），所以我創建一個只包含2個文件的javascript metro風格應用程序中的HTML5：與上面的代碼和文件default.html中jquery.min.js文件。

當運行應用程序時，我有相同的顯示，但使用鼠標滾輪時它的水平滾動不起作用，就像它在ie 10中一樣。注意：鼠標滾輪事件在Metro中被捕獲（在此行上放置一個斷點「$（'body '）.scrollLeft（$（'body'）。scrollLeft（） - event.wheelDelta）;「但是這不是滾動

地鐵的問題是什麼，是否有任何其他方式來進行水平滾動。

謝謝

來源

2012-05-31 HEH

你幾乎沒有。使用.win水平，而不是你#wrapper指定。這爲我工作。

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

謝謝朱莉安娜佩納。

來源

2012-06-04 22:35:12

實際上，您顯示的所有代碼都是添加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-25 14:37:48

Metro風格的應用程序水平滾動使用鼠標滾輪

回答

相關問題