垂直滚动捕捉jQuery答案

【问题标题】：Vertical scrolling snap jQuery垂直滚动捕捉jQuery
【发布时间】：2011-12-06 19:14:59
【问题描述】：

我看过这个jQuery: snapped scrolling - possible? 和这个Scrollable Panel snap to elements on Scroll。但他们并没有真正回答我的问题。

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

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

目前，除了容器的宽度之外，我并没有太多使用 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，但有很多我不知道的东西-.- 非常感谢我得到的任何帮助。

【问题讨论】：

标签： jquery horizontal-scrolling

【解决方案1】：

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

Used as Scrollbar

Scroll tabs

【讨论】：

这可能会起作用：设置步长，然后使用 CSS 设置相应的滑块和句柄。

【解决方案2】：

我希望你的意思是水平滚动捕捉。从您的图表看起来更像是您的意思。如果是这种情况，您可以做与this jsfiddle 中演示的类似的事情。它使用this scrollstop event plugin 知道何时将滚动动画设置到最近的间隔。使用这个插件代码（放在 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 Tools Scrollable。

【讨论】：