0

我在 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;
    });
});
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 回答