Horizontal Scrolling not working? RRS feed

  • Question

  • Hi,

    I have a ListView with Grid Layout. Somehow the mouse scrolling doesn't work. It works in the start menu, so I must have missed some options? 

    Any suggestions?



    Monday, January 16, 2012 8:54 PM


  • It could be that the start screen is intercepting mouse wheel movements.  Wait for the next preview to see what changes have been made to the controls.  I know we are looking to unify some of the control behaviors and this may be one of those cases. 
    Jeff Sanders (MSFT)
    Friday, January 20, 2012 1:34 PM

All replies

  • Hi Louis,

    Some of the ListView samples scroll horizontally.  Compare your code with those and you should be able to spot what you are differently.  If you can find a sample this is doing close to what you want to accomplish and still cannot figure out what you are doing differently, we can use that as a starting point to troubleshoot your problem!


    Jeff Sanders (MSFT)
    Monday, January 16, 2012 8:59 PM
  • Thank you. I should've checked those first... I only checked the gridlayout template.. my bad...
    Monday, January 16, 2012 10:17 PM
  • OK. I have gone through following samples in Javascript and found none of them supports a horizontal scroll. 

    - Getting Started with ListView

    - Custom Data source

    - ListView grouping and Semantic Zoom

    - ListView interaction

    - ListView Item template

    - ListView Loading Behaviours

    Could you please suggest where I can find a sample for it?



    Monday, January 16, 2012 11:37 PM
  • This one should help: ListView grouping and Semantic Zoom

    The semantic zoom is scrolling horizontally (if I remember correctly).

    Jeff Sanders (MSFT)
    Tuesday, January 17, 2012 7:04 PM
  • Hi Jeff,

    Thanks for the reply, but I went back to that semantic zoom sample again. It doesn't seem to work for me. Neither in the regular listview nor in the semantic zoomed view. And I don't see specific code in program.js that implements it.

    Am I missing something? It scrolls horizontally (by wheels and panning) in the start menu though. 


    Tuesday, January 17, 2012 7:59 PM
  • Sorry Louis,

    I was thinking of a different control.  I think you can do what you want by using the gridview layout and setting the maxRows property:

    <div id="basicListView" data-win-control="WinJS.UI.ListView" data-win-options="{layout: {type: WinJS.UI.GridLayout, maxRows:1}, itemRenderer: itemTemplate}">

    Let me know if this is what you were looking for or not.


    Jeff Sanders (MSFT)
    Tuesday, January 17, 2012 8:38 PM
  • Hi Jeff,

    I think I didn't make myself clear enough on the question. I will edit it too. So what my problem really is:

    When you scroll the wheel on your mouse (wheel event?) or hit "left/right arrow key", the start menu scrolls horizontally. But when you do the scrolling in most of the application like twittarama, RSS, the view is not going to scroll horizontally. Neither it scrolls horizontally in my app (created from GridLayout template).

    So I am wonderring did the start menu do anything specifically handled the wheel event and the key events?




    Tuesday, January 17, 2012 8:54 PM
  • It could be that the start screen is intercepting mouse wheel movements.  Wait for the next preview to see what changes have been made to the controls.  I know we are looking to unify some of the control behaviors and this may be one of those cases. 
    Jeff Sanders (MSFT)
    Friday, January 20, 2012 1:34 PM
  • Thank you very much.
    Friday, January 20, 2012 5:02 PM
  • Any updates on whether this is now supported in the Consumer Preview? Some preview apps like Finance and Weather have horizontal scrolling with the mousewheel.
    Saturday, March 3, 2012 7:10 AM
  • No, it does not do this automatically.

    You can trap the event and do it yourself however:


    There is some sample code there trapping the event and changing the zoom.  You can modify this to scroll your gridview instead!


    Jeff Sanders (MSFT)

    Monday, March 5, 2012 8:04 PM
  • Thanks! This seems to be what worked best for me:

    var listView = element.querySelector(".itemlist");
    listView.addEventListener("mousewheel", function (ev) {
        var scroller = listView.querySelector(".win-horizontal");
        if (scroller) {
            scroller.scrollLeft -= ev.wheelDelta;
            return false;

    It'd be great if we could get a control just like what the weather and finance apps use that had the same kind of scrolling, instead of having to do it manually.

    • Edited by Juliana Peña Wednesday, March 7, 2012 2:08 AM
    • Proposed as answer by Biecher Sunday, April 29, 2012 6:54 AM
    Wednesday, March 7, 2012 2:05 AM
  • I very much agree with Juliana, would be great to see a basic control for creating a scrollable horizontal "panorama" canvas, which would not assume anything about the content inside (e.g. content might be something else than a list). This is a common way to layout content in a Metro app, and thus it would be important to be able to create this kind of canvas easily. If one needs to do it manually, it is very easy to forget proper key or mousewheel navigation (or make a faulty implementation), leading to accessibility problems and inconsistent behavior between apps. Implementing this is sure possible for individual app developers, but providing a ready-made control would make sure that all apps (or at least most them) work consistently. 
    Sunday, April 15, 2012 8:05 PM
  • Thanks for the code Juliana. I do agree that this should be a built in thing, and not something we need to hack.

    We had the same thing when Silverlight was first coming out; mouse wheels didn't automatically work on ScrollViewers and other objects with scrollbars, which made the community scratch their heads. Again, there we had to hack at it to make them work.

    Monday, May 14, 2012 9:23 PM
  • u can also try property

    overflow-y: scroll;

    for scrolling horizontally.


    Monday, June 25, 2012 9:32 AM
  • Glad to see that in the Release Preview there's a new property for this (and things seem to work smoothly pretty much out-of-the-box what comes to scrolling) - see -ms-scroll-translation property and what it does. In the default CSS files, it is translating the scrolling so that mouse wheel scrolls nicely the canvas horizontally, one can of course override that in a specific element to enable vertical scrolling.

    Monday, June 25, 2012 9:58 AM