Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New to the CF scene
    Join Date
    Jun 2004
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Mouse wheels and Mozilla

    I was curious if anyone knows if there is a way to detect if the mouse wheel is being used to scroll a div. Neither onscroll or IE's onmousewheel get fired. I can't seem to find any event that gets fired, yet Mozilla still scrolls the div (the reason I need to detect this is because I have custom scrolling logic that I need to run).

    In the following sample code, I add <a> tags to my divs so that the divs can grab focus and respond to key events. This also has the sideeffect that mouse wheel scrolling is enabled.

    Code:
    <html>
    <body>
    
    <div id="parent" style="overflow: auto; width: 100px; height: 400px; border: 1px solid blue;"></div>
    
    <script>
    
    var colors = [ "red", "green", "yellow" ];
    
    var p = document.getElementById("parent");
    
    for (var i = 0; i < 100; i++) {
        var d = document.createElement("div");
        var a = document.createElement("a");
        a.href = "#";
        a.appendChild(document.createTextNode(colors[i % colors.length]));
        d.appendChild(a);
        d.style.width = "75px";
        d.style.height = "30px";
        d.style.backgroundColor = colors[i % colors.length];
        p.appendChild(d);
    }
    
    </script>
    </body>
    </html>
    Last edited by liorean; 06-07-2004 at 04:58 AM.

  • #2
    Regular Coder
    Join Date
    Jul 2003
    Location
    Massachusetts
    Posts
    472
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by mohith_j
    yet Mozilla still scrolls the div
    You sure? Last I checked Mozilla nor IE respond to the scrollwheel being used inside a block element with overflow: auto defined.

  • #3
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Quote Originally Posted by fredmv
    You sure? Last I checked Mozilla nor IE respond to the scrollwheel being used inside a block element with overflow: auto defined.
    It does in these very forums. As soon as the mouse pointer is above a vertically scrollable element, the scroll wheel will scroll that element and not the document. Test it yourself, if you wish.

    (There might be a difference between Logitech, Microsoft and other mice, though, as well as a difference based on what extensions are installed. Logitech are generally recognised as having the best drivers for their mice, and have the best support from the application side.)
    Last edited by liorean; 06-07-2004 at 04:48 AM.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #4
    Regular Coder
    Join Date
    Jul 2003
    Location
    Massachusetts
    Posts
    472
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by liorean
    It does in these very forums. As soon as the mouse pointer is above a vertically scrollable element, the scroll wheel will scroll that element and not the document. Test it yourself, if you wish.
    Wait a second. Are you referring to textareas? If so what you said is indeed true. However, it doesn't appear to work for something like this (which is what I was referring to above):
    Code:
    <div style="overflow: auto; height: 100px; width: 450px;">
    	foo<br /> foo<br />
    	foo<br /> foo<br />
    	foo<br /> foo<br />
    	foo<br /> foo<br />
    	foo<br /> foo<br />
    	foo<br /> foo<br />
    	foo<br /> foo<br />
    	foo<br /> foo<br />
    </div>
    Last edited by fredmv; 06-07-2004 at 05:01 AM.

  • #5
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    No, not textareas. If you have a look at the code behind the [​code][​/code] you'll find it looks like this:
    Code:
    <div style="margin: 5px 20px 20px;">
    <div class="smallfont" style="margin-bottom: 2px;">Code:</div>
    	<pre class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px; width: 640px; height: 498px; overflow: auto;">
    </pre>
    </div>
    These are not textareas, but block level elements with overflow: auto;. They scroll using the scrollwheel, though.
    Last edited by liorean; 06-07-2004 at 05:06 AM.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #6
    Regular Coder
    Join Date
    Jul 2003
    Location
    Massachusetts
    Posts
    472
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh, yes; I knew those weren't textareas. I was referring to the textarea used to post a new reply, of which does indeed exhibit the behavior you described. Though in both the example used here and the example I provided, the element does not appear to respond to scroll events. In fact, Opera 7.51 seems to be the only browser that it worked correctly in.

  • #7
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Well, then it's probably a miss in their implementations, not triggering the scroll event when the element is scrolled. However, at least for me, ALL vertically scrollable elements that I focus are scrolled when I use my mouse wheel in moz (both moz1.7b2 without any extensions and ff.8 with lots of extensions).
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #8
    New Coder
    Join Date
    Jul 2002
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey mo, et all,

    The problem seems to be on Mozilla's side, and there's a bug complaint here:

    http://bugzilla.mozilla.org/show_bug.cgi?id=97283

    They have a lot of activity about it, but doens't seem like any solution or a planned solution in action. It's annoying and hopefully it'll be stamped out. They do have a workaround posted, but again it doesn't work too well.

    ~Ryan (aDog )
    Last edited by Arielladog; 06-07-2004 at 11:40 PM.
    Moderator at WebExpertz Forums

  • #9
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Strangely, all the testcases from that bug report worked as they should for me...
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #10
    New Coder
    Join Date
    Jul 2002
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmm, do you know why? Could it be an extension you added?

    I've tried with Firefox .8 and Mozilla 1.6
    Moderator at WebExpertz Forums

  • #11
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    SuperScroll and Smoothwheel extensions may have something to do with it in ff. Moz1.8a1 with a new profile didn't work. Moz1.7b2 works without any extensions, but I used an old profile, so it may be a remnant from that.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •