This project is archived and is in readonly mode.

#93 ✓resolved
Harmen Wessels

Fx.Scroll fails in Div with overflow: auto;

Reported by Harmen Wessels | July 20th, 2009 @ 10:47 PM | in 1.3.1.1

I had a problem with the Fx.Scroll functionality inside a Div with has the css style overflow: auto;

I dived into the source code and found a solution which work in IE8 and FF3. When I add the following code:

Fx.Scroll.implement({
  toElement: function(el) {
    var scroll = el.getScrolls();
    var position = document.id(el).getPosition(this.element);
    return this.start(position.x + scroll.x, position.y + scroll.y);
  }
});

It works :).

Does anybody want to test this in Safari, Opera and other browsers?

Thanks.

Comments and changes to this ticket

  • csuwldcat

    csuwldcat July 21st, 2009 @ 06:14 AM

    • Assigned user set to “Aaron Newton”
    • Tag set to bug, overflow, slide

    Add the following option to Fx.Slide's options list:

    options: {
        mode: 'vertical',
        overflow: 'hidden' // Added for Slide to account for overflow needs.
    }
    

    ...and a bit further down in the script make the following mod:

    styles: $extend(this.element.getStyles('margin', 'position'), {overflow: this.options.overflow}) // Added for Slide to account for overflow needs.
    

    This will allow you to pass in 'auto' for an overflow option and should solve the issue.

    Any moo dev want to comment on the suggested option?

  • Aaron Newton

    Aaron Newton October 9th, 2009 @ 01:00 AM

    • Milestone set to backlog
    • State changed from “new” to “open”

    I don't understand the issue here. First, csuwildcat, this is a bug about Fx.Scroll, not Fx.Slide, right?

    Harmen, can you make an example on mooshell.net and post it here?

  • heme

    heme October 30th, 2009 @ 01:06 PM

    Hi there,

    This is the only place I've found any info on this problem. Maybe I missed something, but neither of the solutions above worked for me.

    I needed to scroll to a specific li item in a ul that had height: 300px and overflow: auto styles set. To fix this I changed the toElement Method in the Fx.Scroll class:

    toElement: function(el){
        var targetElementPosition = document.id(el).getPosition(this.element);
        var containerScrollPosition = this.element.getScroll();
        var xPos = containerScrollPosition.x + targetElementPosition.x;
        var yPos = containerScrollPosition.y + targetElementPosition.y;
        if(navigator.userAgent.indexOf('Safari') >= 0) {
            xPos = targetElementPosition.x;
            yPos = targetElementPosition.y;
        } 
        return this.start(xPos, yPos);
    },
    

    The problem, i think, was negative scroll values were being sent to the start method. I have not tested this in all uses; just my specific need. Also, I've hard-coded a Safari browser check, because Safari returns different scroll information. I know MooTools uses feature-based detection.

    thanks for all your work!

    -eric ejh at heme dot net

  • heme

    heme October 30th, 2009 @ 01:34 PM

    Also...

    Chrome was being picked up as Safari because of userAgent. This code will work correctly in Chrome:

    
    toElement: function(el){
        var targetElementPosition = document.id(el).getPosition(this.element);
        var containerScrollPosition = this.element.getScroll();
        var xPos = containerScrollPosition.x + targetElementPosition.x;
        var yPos = containerScrollPosition.y + targetElementPosition.y;
        if(navigator.userAgent.indexOf('Safari') >= 0 && navigator.userAgent.indexOf('Chrome') < 0) {
            xPos = targetElementPosition.x;
            yPos = targetElementPosition.y;
        } 
        return this.start(xPos, yPos);
    },
    

    Sorry for the double post.

  • Aaron Newton

    Aaron Newton November 17th, 2009 @ 10:14 PM

    can someone post a mooshell that demonstrates the problem here?

  • Tim Wienk

    Tim Wienk November 11th, 2010 @ 11:26 PM

    • State changed from “open” to “new”
    • Milestone changed from backlog to 1.3.1.1
    • Tag changed from bug, overflow, slide to fx.scroll, overflow
    • Milestone order changed from “0” to “0”

    Updated the code-blocks in this ticket a bit (syntax highlighting and such).

    We should reverify this (if someone understands the problem :-D), maybe someone can make a jsFiddle! So I'll mark it as unverified for now.

  • Arian

    Arian December 23rd, 2010 @ 11:18 PM

    • State changed from “new” to “resolved”
    • Milestone order changed from “1” to “0”

    Can't see the problem anymore in 1.3...

    This div with overflow works fine as far as i can see: http://jsfiddle.net/arian/6WmWu/

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

The MooTools Extensions

Pages