Question

我有一个scrollNo脚本滚动页面。页面它不是窗口的全高度比我有添加mousewhell的问题。

我有代码：

          $('body').mousewheel(function(event, delta) {
          if (flag) { return false; }
          $current = $('section.current');

          if (delta > 0) {
              $prev = $current.prev();

              if ($prev.length) {
                  flag = true;
                  $('body').scrollTo($prev, 1000, {
                      onAfter : function(){
                          flag = false;
                      }
                  });
                  $current.removeClass('current');
                  $prev.addClass('current');
              }
          } else {
              $next = $current.next();

              if ($next.length) {
                  flag = true;
                  $('body').scrollTo($next, 1000, {
                      onAfter : function(){
                          flag = false;
                      }
                  });
                  $current.removeClass('current');
                  $next.addClass('current');
              }
          }

          event.preventDefault();
      });

这是鼠标滚轮的脚本。这是工作，但不是我想要的。如果我的第2部分比窗口大，那么滚动到下一部分之后会自动进行。我最后一节＃3，比Windows大，我向下滚动而不是滚动停止工作。

有人知道如何解决这个问题吗？

Answer 1

如果我理解正确，您可以使用以下代码：

HTML：

<section id='s1'></section>
<section id='s2'></section>
<section id='s3'></section>
<section id='s4'></section>

JS：

function elementInViewport2(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 + window.innerHeight) &&
    left < (window.pageXOffset + window.innerWidth) &&
    (top + height) > window.pageYOffset &&
    (left + width) > window.pageXOffset
  );
};

var current = $('section').first();
current.addClass('current');
var flag;

$(window).scroll(function(event, delta) {
    if (flag) { return false; }

    var $body = $('body'),
        $window = $(window),
        newScroll = $body.scrollTop();

    if (!elementInViewport2(current[0])) {
        current.removeClass('current');
        current[0] = null;
    }

    var newSection = $('section:not(.current)').filter(function(i, el) {
        return elementInViewport2(el);
    }).first();

    if (newSection[0] && current[0] != newSection[0]) {
        current.removeClass('current');
        current = newSection;
        newSection.addClass('current');
        flag = true;
        $body.animate({scrollTop: newSection.offset().top}, function() {
            flag = false;
        });

        event.preventDefault();
    }
});

Demo

具有单页导航功能的鼠标滚轮 - 仅在部分末尾滚动

1 个答案: