0

ユーザーが正常にスクロールできないようにするメカニズムをサイトに書き込もうとしています。ユーザーが下または上にスクロールすると、サイトは次または前のスライドにスムーズにスクロールし (スクロール方向によって異なります)、そこで停止します (ナビゲーションバーをクリックしたときなど)。ライブ プレビューを見る:ここをクリック

しかし、厄介な問題があります。FF（ジャンプなし）ではほぼ問題なく動作しますが、別のブラウザ（Chrome、Safari、IE）では壊れます-ジャンプします。これを防ぐにはどうすればよいですか?コードのスニペットを次に示します。スクロールを防止する ScrollControl オブジェクトがあります。

scrollControl = {
    keys : [32, 37, 38, 39, 40],

    scrollTimer : 0,

    lastScrollFireTime : 0,

    preventDefault  :   function(e){
                            e = e || window.event;
                            if (e.preventDefault)
                              e.preventDefault();
                            e.returnValue = false;
                        },

    keydown :   function(e){
                    for (var i = scrollControl.keys.length; i--;) {
                        if (e.keyCode === scrollControl.keys[i]) {
                            scrollControl.preventDefault(e);
                            return;
                        }
                    }
                },

    wheel   :   function(e){
                    scrollControl.preventDefault(e);
                },

    disableScroll   :   function(){
                            if (window.addEventListener) {
                                  window.addEventListener('DOMMouseScroll', scrollControl.wheel, false);
                              }
                              window.onmousewheel = document.onmousewheel = scrollControl.wheel;
                              document.onkeydown = scrollControl.keydown;
                        },

    enableScroll    :   function(){
                            if (window.removeEventListener) {
                                window.removeEventListener('DOMMouseScroll', scrollControl.wheel, false);
                            }
                            window.onmousewheel = document.onmousewheel = document.onkeydown = null;
                        }   

}

次に、マウスホイールが発生したかどうかをリッスンし、関数を1回だけ実行しようとしています(このプラグインを使用して、マウスホイール PLUGINを検出しています)

$(window).mousewheel(function(objEvent, intDelta){

    var minScrollTime = 1000;
    var now = new Date().getTime();

    function processScroll() {
        console.log("scrolling");
        if(intDelta>0){
        $.smoothScroll({
                speed:med.effectDuration, 
                easing:med.scrollEase, 
                scrollTarget:med.prevPage,
                afterScroll: function(){
                                med.currentPage = med.prevPage;
                                med.setActiveNav();
                                med.setSlides();
                                med.runAnimations();

                            }});
        }else if(intDelta<0){
            //scrollControl.disableScroll();
                $.smoothScroll({
                        speed:med.effectDuration, 
                        easing:med.scrollEase, 
                        scrollTarget:med.nextPage,
                        afterScroll: function(){
                                        med.currentPage = med.nextPage;
                                        med.setActiveNav();
                                        med.setSlides();
                                        med.runAnimations();

                                    }});
        }
    }

    if (!scrollControl.scrollTimer) {
        if (now - scrollControl.lastScrollFireTime > (3 * minScrollTime)) {
            processScroll();   // fire immediately on first scroll
            scrollControl.lastScrollFireTime = now;
        }
        scrollTimer = setTimeout(function() {
            scrollControl.scrollTimer = null;
            scrollControl.lastScrollFireTime = new Date().getTime();
            processScroll();
        }, minScrollTime);
    }



});

scrollControl.disableScrollユーザーがウェブサイトを起動したときに、DOM Ready イベントで関数を実行しています。また、実際に1回スクロールすると、防止が完全に機能せず、スムーズスクロールが2回トリガーされる場合があります。私は何を間違っていますか？提案をお寄せいただきありがとうございます！

4

2 に答える 2

1

同じ問題が発生し、マウスホイールイベントが2回発生しました。

function wheelDisabled(event){

    event.preventDefault();
    event.stopImmediatePropagation();
    return false;
}

また、これらのイベントの両方を使用することもできます。

window.addEventListener('DOMMouseScroll', wheel, false);
window.addEventListener('mousewheel', wheel, false);
于 2012-10-05T10:04:27.593 に答える
0

Javascript でスクロールを防止しようとする代わりに、別のアプローチを試みます。このアプローチには CSS と Javascript が含まれており、Web サイトがビューポートよりも大きくならないようにします (したがって、スクロールバーはありません!)。

CSS を使用して、メインのラッピング div (サイト上のすべてのコンテンツをラップする div) を強制的にoverflow: hidden にします。次に、Javascript を使用して、この div の高さと幅が常にビューポートの高さと幅に等しいことを動的に確認します。

このシナリオでは、事前定義された方法でスクロールを実装したい場合は、負の margin-top (水平スクロールの場合は負の margin-left) を動的に親ラッピング div に追加して、スクロールしているように見せることができます。

于 2012-10-05T10:02:56.987 に答える