breaks on window resize

[okwme]

hello, i am using scrollsnap on a series of divs which are each full window height. when the window is resized the div's heights change and scrollsnap starts making the whole page jitter up and down. i looked for a destroy method so i could rebuild scrollsnap on resize but it looked like you decided not to do one. do you know another workaround? thank you for the otherwise fantastic piece of code : ) b

[benoitpointet]

no unfortunately not. pull requests and other forms of contribution are much appreciated ;)

[benoitpointet]

Scrollsnap actually should behave fine with resizes. Can you provide more infos, an example URL?

[okwme]

link to problem here: http://goo.gl/dXCYjB

On Tue, Sep 9, 2014 at 11:08 PM, Benoît Pointet [email protected] wrote:

Scrollsnap actually should behave fine with resizes. Can you provide more infos, an example URL?

— Reply to this email directly or view it on GitHub https://github.com/benoitpointet/jquery-scrollsnap-plugin/issues/23#issuecomment-55036061 .

billyrennekamp.com

[benoitpointet]

cannot reproduce the error, which browser? when resizing from what size to what size?

[john-wallace-apps]

I'm having the same problem. I can see it on his page. Scroll to down a few pages. Then as you resize the window notice that the pictures either ride up or ride down until you stop resizing the window and then they'll snap into place. I just saw that on his page using Mac+Safari, but I've seen it happen for my own site in multiple browsers on both Mac and Win.

[john-wallace-apps]

This isn't really a scrollsnap issue. I have horizontal content and the problem is that as I resize the window it will scroll to different pages. The problem is that the scrollLeft attribute isn't changing although the scrollWidth is. To fix the problem I did:

            // We're seeing a problem where the content scrolls to a different page as we resize the
            // window. The reason is that the scrollLeft hasn't changed. We need to keep the scrollLeft
            // as a ratio of the total width so we don't flip pages.
            var scrollRatio = -1;

            $("#contents").scroll(function(){
                scrollRatio = $("#contents").scrollLeft() / $("#contents").prop("scrollWidth");
            });

            $(window).resize(function() {
                if (scrollRatio >= 0) {
                    $("#contents").scrollLeft($("#contents").prop("scrollWidth") * scrollRatio);
                }
            });