All geek questions in one place

Horizontal scrolling of Metro style apps using the mouse wheel

Hi, I tried to make a proof of concept for my metro style app. this is my code:

<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>

The mousewheel event works fine in IE10 (Windows 8), so I created an html5 javascript metro style application containing only 2 files: the default.html file with the above code and the jquery.min.js file.

When I started the application, I had the same display, but horizontal scrolling did not work when using the mouse wheel, as if it worked, i.e. 10. Note: the mousewheel event is fixed in Metro (puts a breakpoint on this line "$ (" body "). ScrollLeft ($ ('body'). ScrollLeft () - event.wheelDelta);" but this is not scrolling.

What is the problem with the metro, and is there any other way to do horizontal scrolling.

thanks

+4
source share
2 answers

You are almost there. Use .win-horizontal instead of #wrapper. It worked for me.

Found the answer at: http://social.msdn.microsoft.com/Forums/en-US/winappswithhtml5/thread/3b4e4ffa-3d27-4d34-810b-03311fac03e8

Thanks, Juliana Pena.

+1
source

Actually with the code you are showing, all I did was add event.preventDefault (); to stop vertical scrolling by default.

 <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(); }; });

0
source

Source: https://habr.com/ru/post/1415312/

More articles:


All Articles