水平滚动后的jQuery捕捉

Question

我有一个使用鼠标滚轮 jQuery 插件的水平滚动站点。滚动有效，但我想将每个“文章”捕捉到文档的左侧，这样一旦滚动停止，它就不会保持中途剪切。

到目前为止我的标记：

CSS

#viewport {
width:100%;
height:100%;
overflow: hidden;
}

#stage {
height:100%;
width:400%;
position: absolute;
display:block;
overflow: hidden;
}

#stage article {
width:25%;
height:100%;
position: relative;
display:block;
float:left;
}

HTML

<div id="viewport">
<section id="stage" class="clearfix">
<article>
This is the block that should snap to the left once scrolling is stopped.
</article>

<article>
This is the block that should snap to the left once scrolling is stopped.
</article>

<article>
This is the block that should snap to the left once scrolling is stopped.
</article>

<article>
This is the block that should snap to the left once scrolling is stopped.
</article>

</section>
</div>

JQUERY

$(function() {
$("html, body").mousewheel(function(event, delta) {
this.scrollLeft -= (delta * 30);
event.preventDefault();
});
});

我尝试使用这个脚本没有好的结果。似乎百分比阻止了知道上一个/下一个位置。

https://stackoverflow.com/a/8170667

提前致谢。

Answer 1

我不知道你说的上一个/下一个位置是什么意思。

但您可以在每次滚动结束时检查屏幕左侧是否位于最近的文章。如果没有，请滚动一点。

也许……

$(function() {
    $("html, body").mousewheel(function(event, delta) {

        var theBody = $('body');
        theBody.scrollLeft(this.scollLeft() - delta * 30);

        /* Snap how close, how many articles, and what direction is the scroll? */
        var tolerance = 10;
        var numberOfArticles = 4;
        var signDelta = number?number<0?-1:1:0;

        /* While you're not within an acceptable tolerance, get a little closer */
        while (!((theBody.scollLeft()%(theBody.width() / numberOfArticles))  > tolerance))
        {
            theBody.scrollLeft(theBody.scollLeft() - signDelta * 1);
        }

        event.preventDefault();
    });
});