Question

我有一个使用mousewheel 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();
    });
});

水平滚动后jQuery捕捉

1 个答案: