Question

我在使用viewport jQuery插件的帮助下滚动HTML部分时遇到了一些问题。我在页面上有4个部分，我想在鼠标滚动（向上或向下）的同时逐个滚动。我的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;
    });
});

Answer 1

这里的问题是，当页面滚动时，如果您使用浏览器中的滚动条，则会调用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 function

使用视口JQuery滚动部分

1 个答案: