垂直滚动对齐jQuery [英] Vertical scrolling snap jQuery

问题描述

我看过了这个 jQuery:快照滚动-可能吗?和这个可滚动面板"捕捉到Scroll上的元素.但是他们并没有真正回答我的问题.

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.

我的div确实很宽，但与窗口的高度相同.当用户滚动时，它会很好地向左移动.但是，当用户停止滚动时，我可以让此滚动条对齐吗?因此，容器在开始位置位于左侧28px处，我希望它在开始处进行捕捉，然后在此之后每隔207px捕捉一次，具体取决于用户更靠近哪个捕捉点.

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.

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

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

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

有人知道实现此目标的最佳方法吗?我希望知道代码，所以如果有解决方案，您可以解释一下吗?我正在学习jQuery，但是有很多我不知道的负载-.-非常感谢我提供的任何帮助.

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.

推荐答案

我希望您的意思是水平滚动对齐.从您的图表看来，这更像是您的意思.在这种情况下，您可以执行与此jsfiddle 中演示的操作类似的操作.它使用此scrollstop事件插件来了解何时为您的动画设置动画滚动到最近的时间间隔.使用此插件代码(放置在scrollstop插件代码之后):

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

对于预构建的解决方案，您可能想查看可滚动浏览的jQuery工具.

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

这篇关于垂直滚动对齐jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！