0

ビューポート jQuery プラグインを使用して HTML セクションをスクロールするという問題に直面しています。ページに 4 つのセクションがあり、マウスのスクロール (上下) 中に 1 つずつスクロールしたい。私のHTMLとJavaScriptコードは以下のとおりです。

<section id="chapter1-block" class="chapter">
<span id="chapter1" class="pointer"></span><span class="pointer-b"></span>
</section>

<section id="chapter2-block" class="chapter">
<span id="chapter2" class="pointer"></span><span class="pointer-b"></span>
</section>

<section id="chapter3-block" class="chapter">
<span id="chapter3" class="pointer"></span><span class="pointer-b"></span>
</section>

<section id="chapter4-block" class="chapter">
<span id="chapter4" class="pointer"></span><span class="pointer-b"></span>
</section>

JS:

$(function () {
    var _top = $(window).scrollTop();
    var _direction;
    var curChapterPos = 'chapter1';
    $(window).scroll(function(){
        var _cur_top = $(window).scrollTop();
        console.log(curChapterPos);
        if(_top < _cur_top)
        {   
            if(curChapterPos == "chapter1")
            {
                $('body').scrollTo( '#chapter2');
                curChapterPos = 'chapter2';
                console.log(_cur_top);
                return false;
            }
            else
            if(curChapterPos == "chapter2")
            {
                $('body').scrollTo( '#chapter2');
                curChapterPos = 'chapter3';
                console.log('3--'+curChapterPos);
                return false;
            }else
            if(curChapterPos == "chapter3")
            {
                $('body').scrollTo( '#chapter3');
                curChapterPos = 'chapter4';
                console.log('3--'+curChapterPos);
                return false;
            }           
            _direction = 'down';
        }
        else
        {
            _direction = 'up';
        }
        _top = _cur_top;
    });
});
4

1 に答える 1

0

ここでの問題は、ページがスクロールするときに、ブラウザからスクロール バーを使用すると関数が 7 回呼び出されることです。キーダウンで9回。また、マウス ホイールを使用すると、関数は 12 ～ 25 回呼び出されます。マウスの感度はクライアント/ブラウザによって異なる可能性があるため、マウスの使用を避けると問題が解決する可能性があります。しかし、これは元の質問を解決しません。おそらく、ページのスクロールとマウスのホバーおよびタグの可視性を組み合わせると、必要な答えが得られるでしょう。

これが私の部分的な解決策です。マウスのスクロールが下がるとループします。

http://jsfiddle.net/manueru_mx/Wm6Pn/

$(function () {
    var _top = $(window).scrollTop();
    $("#xtop").val(0);
    var _direction;
    var curChapterPos = '';
    var _last = false;

    $(window).scroll(function(){
        var _cur_top = $(window).scrollTop();        
        var _top = $("#xtop").val();
        curChapterPos = $("#chapterhidden").val();

        if(_top < _cur_top){            
            if(curChapterPos == "chapter1"){
                $('body').scrollTo( '#chapter2');
                curChapterPos = 'chapter2';
                $("#chapterhidden").val(curChapterPos);
            }else if(curChapterPos == "chapter2"){
                $('body').scrollTo( '#chapter2');
                curChapterPos = 'chapter3';                
                $("#chapterhidden").val(curChapterPos);                
            }else if(curChapterPos == "chapter3"){
                $('body').scrollTo( '#chapter3');                
                curChapterPos = 'chapter4';
                $("#chapterhidden").val(curChapterPos);                
            } else if(curChapterPos == "chapter4" &&  elementInViewport(document.getElementById('chapter3')) == false){                
                console.log("aquisss");
                $('body').scrollTo( '#chapter4');
                curChapterPos = 'chapter4';
                $("#chapterhidden").val(curChapterPos);
                $("#xtop").val(_cur_top+1000);
            }else{
                return false;
            }
            _direction = 'down';            
            $("#xtop").val(_cur_top);

        }else {            
            if(curChapterPos == "chapter4" && elementInViewport(document.getElementById('chapter4-block')) == false){                
                $('body').scrollTo( '#chapter3');
                curChapterPos = 'chapter3';
                $("#chapterhidden").val(curChapterPos);                
            } else if (curChapterPos== "chapter3"){
                $('body').scrollTo( '#chapter2');
                curChapterPos = 'chapter2';
                $("#chapterhidden").val(curChapterPos);
            } else if (curChapterPos== "chapter2"){            
                $('body').scrollTo( '#chapter1');
                curChapterPos = 'chapter1';
                $("#chapterhidden").val(curChapterPos);
            }
            _direction = 'up';
            $("#xtop").val(_cur_top);
        }        
    });
});


function elementInViewport(el) {
  var top = el.offsetTop;
  var left = el.offsetLeft;
  var width = el.offsetWidth;
  var height = el.offsetHeight;

  while(el.offsetParent) {
    el = el.offsetParent;
    top += el.offsetTop;
    left += el.offsetLeft;
  }

  return (
    top >= window.pageYOffset &&
    left >= window.pageXOffset &&
    (top + height) <= (window.pageYOffset + window.innerHeight) &&
    (left + width) <= (window.pageXOffset + window.innerWidth)
  );
}

最後の位置に入ると、進行方向は上ですが、決して状態にはなりません。そこで、終了位置に 1000 を追加します。これによりサイクルが作成され、最初から開始できます。それは間違っていますが、動作にロジックが見つかりません。興味深いことに、最後の位置でのみ発生します。

FF 16 および IE 8 で互換表示を使用してテスト済み。マウスのスクロール、キーダウン、ブラウザのスクロールバーで動作します。

このプラグインを使用すると、より簡単になります。 http://www.appelsiini.net/projects/viewport

しかし、私はあなたの最初のアプローチをあまり変えません。ライブラリ scrollTo を使用したのは、あなたがその関数を使用していて、jQuery にネイティブではないためです。

http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js

この助けを願っています

参考文献： ElementInViewPort 関数

于 2012-10-23T22:16:21.483 に答える