Vertical scrolling snap jQuery

Question

I have taken a look at this jQuery: snapped scrolling - possible? and this Scrollable Panel snap to elements on Scroll. But they don't really answer the question I have.

I have a divs that's really wide but same height as window. It moves to the left nicely when the user scrolls. But can I get this scroller to snap when the user stops scrolling. So the container sits 28px to the left at the beginning and I want it to snap at the start and then every 207px after that depending which snap point the user is closer to.

---------------------
|-------------------|-------------------
|                   |                   |
|                   |                   |            
|-------------------|-------------------
---------------------

At the minute I am not using jQuery for much except the width of the container.

var numOfPosts = jQuery(".blog-post").length;
var div5 = numOfPosts/5;
var gutters = Math.ceil(div5)*10;
var posts = Math.ceil(div5)*197;
var postListWidth = gutters + posts + 9;
var w = jQuery(window).width();
var h = jQuery(window).height();
    if(postListWidth<=w){
        jQuery(".post-list").width(w-28);
    }else{
        jQuery(".post-list").width(postListWidth);
     }

Does anyone know the best way to achieve this? I would prefer to know the code so if there's a solution can you explain it? I am learning jQuery but there's loads I don't know about -.- Thanks very much for any help I get.

Answer 1

I'm hoping you mean horizontal scroll snap. From your diagramm it looks more like that's what you mean. If that's the case, you could do something similiar to what's demonstrated in this jsfiddle. It uses this scrollstop event plugin to know when to animate your scroll to the nearest interval. Using this plugin code (placed after the scrollstop plugin code):

(function($) {      
    $.fn.scrollSnap = function(snapInterval) {
        var mousedown = false;

        function nearestInterval(n, iv) {
            return Math.round(n / iv) * iv;
        }

        function snapToInterval() {
            if(mousedown) {
                $(window).one("mouseup", snapToInterval);
            } else {
                var $this = $(this),
                    snapLeft = nearestInterval($this.scrollLeft(), snapInterval);

                $(this).animate({scrollLeft: snapLeft});
            }
        }

        $(window).mousedown(function() { mousedown = true });
        $(window).mouseup(function() { mousedown = false });

        this.each(function() {
            $(this).bind("scrollstop", snapToInterval);
        });
    }
})(jQuery);

You'll then be able to use this on elements with scrollbars:

$("#scrollWrapper").scrollSnap(207);

For a prebuilt solution, you might want to check out jQuery Tools Scrollable.

Answer 2

If you are not opposed to using more jQuery try jQuery UI Slider. It has snaping option. These examples should be helpful.

Used as Scrollbar

Scroll tabs