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

发布时间：2020-12-14 05:41:07 所属栏目：Windows 来源：网络整理

导读：嗨,我正在尝试为我的地铁风格应用程序进行概念验证. 这是我的代码： ??? htmlheadscript src="jquery.min.js"/script/headbody style="height: 600px" div id="wrapper" style="width:10000px" div class="child" style="float: left; width: 200px; border-

嗨,我正在尝试为我的地铁风格应用程序进行概念验证.
这是我的代码：

???

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

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

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

谢谢

解决方法

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

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

谢谢JulianaPe?a.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!