4

私はfullPage.jsJQuery プラグインを使用しています (こちらのデモをご覧ください)。このプラグインは、フル ウィンドウ サイズのセクションを定義し、ユーザーが上下にスクロールするとセクション「スライド」から「スライド」にスクロールします。

スクロール開始時にスクロールイベントがすぐに発生しないように変更しようとしていますが、短時間または特定のスクロール量の後に、ユーザーが誤って数ピクセルスライドするのを防ぎ、スクロールイベントを発生させてスクロールします次のスライド。

たとえば、ユーザーがオフセット < 100px でスクロールした場合は現在のスライドに戻り、オフセット > 100px の場合は次のスライドにスクロールします。

これがfullpage.jsコードです。私が望むものを得るには、この関数を変更する必要があると思います:

//when scrolling...
$(window).scroll(function(e){
        if(!options.autoScrolling){
                var currentScroll = $(window).scrollTop();

                var scrolledSections = $('.section').map(function(){
                        if ($(this).offset().top < (currentScroll + 100)){
                                return $(this);
                        }
                });

                //geting the last one, the current one on the screen
                var currentSection = scrolledSections[scrolledSections.length-1];

                //executing only once the first time we reach the section
                if(!currentSection.hasClass('active')){
                        var yMovement = getYmovement(currentSection);

                        $('.section.active').removeClass('active');
                        currentSection.addClass('active');

                        var anchorLink  = currentSection.data('anchor');
                        $.isFunction( options.onLeave ) && options.onLeave.call( this, currentSection.index('.section'), yMovement);

                        $.isFunction( options.afterLoad ) && options.afterLoad.call( this, anchorLink, (currentSection.index('.section') + 1));

                        activateMenuElement(anchorLink);        
                }
        }                                        
});

しかし、それを行う方法が本当にわかりません...スクロールの開始とスクロールの終了時にスクロールオフセット/時間を取得し、違いを取得してから、違いに応じて現在または次のスライドにスクロールする必要があると思いますが、私はしませんこの関数でこれを実装する方法と、スクロール終了イベントを取得する方法がわかりません。

また、「スクロール終了イベント」の使用についてはわかりません。ユーザーが上下にスクロールしたい場合、スクリプトは、ユーザーがスクロールを停止して必要な場所にスクロールするのを待つ必要がないためです..

たぶん、スクロール中にスクロールオフセットを取得し、オフセット> xのときに次へスクロールし、スクロールが停止してオフセット< xの場合は現在のスクロールに戻る必要がありますか? または、スクロール オフセットの代わりにスクロール時間を使用できますか?

4

1 に答える 1

5

マウスホイールではなく、ラップトップとそのトラックパッドで問題が発生していると思います。私は正しいですか？または、スクロールに関してはトラックパッドのような Apple マウスを使用することもできます。

念のために言っておきますが、問題は$(window).scroll(function(e){関数ではなく、MouseWheelHandler(). この.scroll関数は、最初の条件でわかるように、オプションautoScrollingが に設定されている場合にのみ使用されます。false

MouseWheelHandler()つまり、マウスホイールまたはトラックパッドでスクロールが検出されるたびに、関数が起動されます。最初のスクロールで発砲しないようにする方法は、カウンターを作成することです。

スクロールは通常のマウスホイールよりもトラックパッドの方がはるかに敏感であるため、注意が必要です。したがって、使用するスクロールの最小数を定義する前に、両方のデバイスで試してください。

0 に設定された新しい変数を定義しました。

var scrolls = 0;

次に、内部MouseWheelHandler()に新しい条件を追加しましたscrolls > 2。

if(options.autoScrolling && scrolls>2){

このようにして、3 回以上スクロールした場合にのみイベントを発生させます。マウス ホイールには十分だと思います。

条件を入力しない場合は、変数をインクリメントします。

}else{
    scrolls++;    
};

これが実際のデモです: http://jsfiddle.net/prYUq/2/

そして、ここで完全に変更された関数:

var scrolls = 0;

 function MouseWheelHandler() {
     return function (e) {
         if (options.autoScrolling && scrolls > 2) {
             // cross-browser wheel delta
             e = window.event || e;
             var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
             e.wheelData

             console.log("e.wheelDelta: " + e.wheelDelta);
             console.log("-e.detail: " + e.detail);

             if (!isMoving) { //if theres any #
                 var scrollable = $('.section.active').find('.scrollable');

                 //scrolling down?
                 if (delta < 0) {
                     if (scrollable.length > 0) {
                         //is the scrollbar at the end of the scroll?
                         if (isScrolled('bottom', scrollable)) {
                             $.fn.fullpage.moveSlideDown();
                         } else {
                             return true; //normal scroll
                         }
                     } else {
                         $.fn.fullpage.moveSlideDown();
                     }
                 }

                 //scrolling up?
                 else {
                     if (scrollable.length > 0) {
                         //is the scrollbar at the start of the scroll?
                         if (isScrolled('top', scrollable)) {
                             $.fn.fullpage.moveSlideUp();
                         } else {
                             return true; //normal scroll
                         }
                     } else {
                         $.fn.fullpage.moveSlideUp();
                     }
                 }
             }
             scrolls = 0;

             return false;
         } else {
             scrolls++;
         };
     }
 }

プラグインに関する具体的な質問やリクエストがある場合は、このプラグインに関する github の問題フォーラムを忘れないでください: https://github.com/alvarotrigo/fullPage.js/issues?state=open

役に立てば幸いです。

于 2013-10-22T10:23:31.447 に答える