Question

我已经看过这个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，但是我不知道有关于-.-的负载非常感谢我的帮助。

Answer 1

我希望你的意思是水平滚动按钮。从你的图表来看，它看起来更像是你的意思。如果是这种情况，你可以做一些类似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。

Answer 2

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

Used as Scrollbar

Scroll tabs

垂直滚动快照jQuery

2 个答案: