Search code examples
javascriptmootools

MooTools Fx.SmoothScroll() at min-screen width only


Is there a simple way to initialize Fx.SmoothScroll at a minimum screen width, and disable it below?

Ex, I only want the smooth scroll to happen above 400px.

Why, because a show/hide responsive menu is messing with the scroll target position, so JS is scrolling past the target.

UPDATE: I thought it would be better to actually measure the offset of the transitioning element, and set that in smooth scroll. I tried this, but it is not working.

            $$('#nav ul li a.menu')[0].addEvent('click', function(){
                window.offset = $('nav').getSize().y - 32;
                console.log(window.offset)
            });
            new Fx.SmoothScroll({
                offset: {
                    y: -window.offset
                }
            });

How would I update the offset on each click?


Solution

  • After going the proper "responsive" route, I came up with this code.

                var theScroll = new Fx.Scroll(window);
                $$('#nav ul li a.menu')[0].addEvent('click', function(e){
                    e.preventDefault();
                    offset = $('nav').getSize().y - 32;
                    theScroll.options.offset.y = -offset;
                    theScroll.toElement($('menu'),'y');
                });