Skip to main content
K
ktmurph
Participant
January 12, 2009
Answered

How to scroll within a datagrid without the browser window scrolling as well

  • January 12, 2009
  • 5 replies
  • 102196 views
Hi,

I have a datagrid with a vertical scrollbar. When the mouse is over the datagrid i'd like to use the mouse wheel to scroll through its contents. However when i do this the main browser window (which also has a vertical scrollbar) scrolls as well. How can i prevent the main browser window from scrolling when the mouse is over the datagrid so that only the contents of the datagrid scroll?

Thanks
    This topic has been closed for replies.
    Correct answer ktmurph
    I found some javascript code that solves this problem. Credit for the code has to go to the person who wrote the excellent article at the following link: http://www.switchonthecode.com/tutorials/javascript-tutorial-the-scroll-wheel
    If you read this article the code below should make sense.

    From this article i used the hookEvent and cancelEvent functions. In my particular case I embed the SWF object inside a JSP page using some javascript code. After the SWF is loaded i added the following line of code:

    hookEvent('my_swf_id', 'mousewheel', handleMouseWheel);

    where handleMouseWheel is defined as follows:

    function handleMouseWheel(e)
    {
    if (document.getElementById("my_swf_id"))
    {
    document.getElementById("my_swf_id").focus();
    }
    return cancelEvent(e); // This is the key to the solution...
    }

    When the mouse is over the datagrid in the SWF i can use the mouse wheel to scroll its contents without the main browser window scrolling at the same time.

    Thanks to all who took time to post their ideas, it was appreciated.

    5 replies

    K
    ktmurphAuthorCorrect answer
    Participant
    January 13, 2009
    I found some javascript code that solves this problem. Credit for the code has to go to the person who wrote the excellent article at the following link: http://www.switchonthecode.com/tutorials/javascript-tutorial-the-scroll-wheel
    If you read this article the code below should make sense.

    From this article i used the hookEvent and cancelEvent functions. In my particular case I embed the SWF object inside a JSP page using some javascript code. After the SWF is loaded i added the following line of code:

    hookEvent('my_swf_id', 'mousewheel', handleMouseWheel);

    where handleMouseWheel is defined as follows:

    function handleMouseWheel(e)
    {
    if (document.getElementById("my_swf_id"))
    {
    document.getElementById("my_swf_id").focus();
    }
    return cancelEvent(e); // This is the key to the solution...
    }

    When the mouse is over the datagrid in the SWF i can use the mouse wheel to scroll its contents without the main browser window scrolling at the same time.

    Thanks to all who took time to post their ideas, it was appreciated.
    A
    Anonymous
    January 12, 2009
    You can use JavaScript to give the swf the browser's focus. This can be done via the ExternalInterface and then give the swf focus to the datagrid. Timing is the issue doing this.

    N
    Newsgroup_User
    Inspiring
    January 12, 2009

    "ktmurph" <webforumsuser@macromedia.com> wrote in message
    news:gkfced$7cq$1@forums.macromedia.com...
    > Thanks for your reply Milo.
    > I tried your suggestion before but it doesn't work. The swf in which the
    > datagrid lives is embedded in a page that contains other non-flex
    > elements.
    > There does not seem to be any communication between the swf and the
    > browser in
    > terms of who should scroll.
    > I read an article which suggested that the data grid should scroll first
    > until
    > it reaches its maxVerticalScrollPosition and then the browser should kick
    > in
    > and scroll the main page but that does not seem to be the case.

    I think you'll need to actually click into the datagrid to get this
    behavior.


    K
    ktmurphAuthor
    Participant
    January 12, 2009
    Thanks for your reply Milo.
    I tried your suggestion before but it doesn't work. The swf in which the datagrid lives is embedded in a page that contains other non-flex elements. There does not seem to be any communication between the swf and the browser in terms of who should scroll.
    I read an article which suggested that the data grid should scroll first until it reaches its maxVerticalScrollPosition and then the browser should kick in and scroll the main page but that does not seem to be the case.
    A
    Anonymous
    January 12, 2009
    use setFocus() if navigate over the datagrid (use MouseEvent.MOUSE_OVER).
    Somehow like this:

    dataGrid.addEventListener( MouseEvent.MOUSE_OVER,
    function(evt:MouseEvent):void
    {
    dataGrid.setFocus();
    });
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices