垂直滚动捕捉 jQuery

Question

我已经看过这个jQuery：捕捉滚动 - 可能吗？和这个可滚动面板捕捉到滚动上的元素。但他们并没有真正回答我的问题。

我有一个非常宽但与窗口高度相同的 div。当用户滚动时，它会很好地向左移动。但是当用户停止滚动时我可以让这个滚动条捕捉吗？ 因此，容器在开始时位于左侧 28 像素处，我希望它在开始时对齐，然后每隔 207 像素对齐，具体取决于用户更接近哪个对齐点。

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

目前，除了容器的宽度之外，我没有太多使用 jQuery。

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);
     }

有谁知道实现这一目标的最佳方法？我更想知道代码，所以如果有解决方案，你能解释一下吗？我正在学习 jQuery，但有很多我不知道的内容 -.- 非常感谢我得到的任何帮助。

Answer 1

我希望你的意思是水平滚动捕捉。从你的图表来看，它看起来更像是你的意思。如果是这种情况，您可以执行类似于 this jsfiddle 中演示的操作。它使用这个scrollstop事件插件来知道何时为你的动画设置动画滚动到最近的间隔。使用此插件代码（放置在滚动停止插件代码之后）：

(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);

然后您将能够在带有滚动条的元素上使用此插件：

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

对于预构建的解决方案，您可能需要查看 可滚动的 jQuery 工具。

Answer 2

如果您不反对使用更多 jQuery，请尝试 jQuery UI Slider。它有捕捉选项。
这些例子应该会有帮助。

用作滚动条

滚动选项卡