3

私はこのスクロール効果をウェブサイトで機能させようとしています。ユーザーが下にスクロールすると、自動的に次のスライドに移動する必要があります。ユーザーが上にスクロールすると、スライドを1つ戻す必要があります。Jqueryの関数を使用して多くのことを試しましたonScrollが、どれも機能していないようです。

次のスクリプトを使用して、ユーザーが上にスクロールするか下にスクロールするかを確認します。

var lastScrollTop = 0;
var check = 1;
var scrollDirection = 'down';

var scrollBottom = $(window).scrollTop() + $(window).height();
    $(window).scroll(function(event) {
        slideHeight = $('.slide').height();
         var st = $(this).scrollTop();
         if (st > lastScrollTop){
             scrollDirection = 'down';
             if (check == 1){
                $('body').scrollTo( {top:'0px', left:'100%'}, 800 );
     check = 0;    
 }

         } else {
             scrollDirection = 'up';
         }
         lastScrollTop = st;


         console.log('ScrollDirection: '+ scrollDirection);

    });

私はこれ以上来ることはありません。開発が行われる（テスト）Webサイトは次のとおりです。http：//bit.ly/RBcffY この種の機能の経験がある人は、本当に役に立ちます。

4

2 に答える 2

12

jquery.mousewheelプラグインを使用すると、スクロールが発生していない場合でもマウス ホイールをキャプチャできます (逆に)$.scroll。このようにして、マウス ホイールが移動したことを検出し、スクロールが発生しないようにすることができます。あとは、アニメーションのスクロールを自分で実行するだけです。

var scrollingScreen = false;
$("body").mousewheel(function(event, delta) {
    if ( !scrollingScreen ) {
        scrollingScreen = true; // Throttles the call
        var top = $("body").scrollTop() || // Chrome places overflow at body
                  $("html").scrollTop();   // Firefox places it at html
        // Finds slide headers above/below the current scroll top
        var candidates = $(".slide").filter(function() {
            if ( delta < 0 )
                return $(this).offset().top > top + 1;
            else
                return $(this).offset().top < top - 1;
        });
        // If one of more are found, updates top
        if ( candidates.length > 0 ) {
            if ( delta < 0 )
                top = candidates.first().offset().top;
            else if ( delta > 0 )
                top = candidates.last().offset().top;
        }
        // Performs an animated scroll to the right place
        $("html,body").animate({ scrollTop:top }, 800, "easeInOutQuint", function() {
            scrollingScreen = false; // Releases the throttle
        });
    }
    return false; // Prevents default scrolling
});​

jsFiddleでの作業例。これは、示した参照の動作とかなり一致しており、必要に応じて追加の効果を追加できます。コードanimateをコールバック関数の前または中に挿入して、スクロールの前または後にそれぞれ実行します。(観察: で実行されているフィドルは、セキュリティ上の理由から、一部のブラウザーでiframeはアクセスできないため、変数をグローバルに保存します。ただし、回答に示されているコードは、スタンドアロン ページで正常に動作するはずです)scrollToptop

注：参照サイトと私の例の両方で、マウスを中クリックして移動すると、自由にスクロールします。それを防ぎたいかどうかは、あなたの選択です。それにもかかわらず、更新された例は、質問で提案したように、デルタを追加するだけでなく、特定のポイントまでスクロールします- $('.slide').height(). その理由は、スライドごとに高さが異なる可能性を考慮するためです。また、表示しているスライドを正確に把握することで、場所のハッシュを適切に設定できます。

詳細については、この関連する質問も参照してください。

于 2012-10-20T17:00:16.303 に答える