Question

Hey Community out there - here comes a tough one, at least for me. Maybe there is some help out there.
I am working on a full page vertically/horizontally scrolling website that is powerd by the scrollTo plugin. In general all is working good and smooth but with some content, like the Nivo Slider, the scrolling becomes a bit shaky, like having hig ups. It seems to happen every time the Nivo Slider is changing the images and if you are scrolling at the same time.

I am now looking for a way to work smoothly around this behavior, searching for a way to stop the Nivo Slider when he is not in the viewport but make him work again when he comes into the vieport again. That way, I guess he would not disturb any scrolling transition. This is my wild guess as a newbie but whatever help and suggestion would be appreciated very much. It all is about stopping whatever dynamic content is included to the different panels (like banners, galleries, sliders) if they are not in the viewport.

Any Ideas?

Was it helpful?

Solution

I have never used this plugin, but I think you need the "Start and Stop the Scroller" section on the Nivo Slider homepage. The easiest way to do this would be to disable the image slider while the slideTo function is running and enable it again afterwards. This means you wouldn't have to work out whether the slider is visible or not.

E.g.:

$('a.scroll').click(function(){
    $('#slider').data('nivo:vars').stop = true;

    $.scrollTo({top: 500, left: 200},    // target
                1000,                    // duration
                {                        // settings
                    onAfter:function() { // callback when scrolling is complete
                        $('#slider').data('nivo:vars').stop = false;
                    }
                }
    );
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top