1

マウスホイール 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>

Jクエリ

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

このスクリプトを使用してみましたが、良い結果は得られませんでした。パーセンテージが前/次の場所を知ることを妨げているようです。

https://stackoverflow.com/a/8170667

前もって感謝します。

4

1 に答える 1

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();
    });
});
于 2013-08-22T20:15:37.343 に答える