jquery - 在不滚动窗口的情况下捕捉到部分

Question

我想捕捉到 div 中的部分，但是我想在不滚动窗口的情况下执行此操作。我希望能够在该 div 内滚动。

我认为我对自己的解释还不够好。当我滚动时，窗口会滚动，然后文章会卡入到位，依此类推。我希望它是这样的，当我在#content 中滚动时，文章将被固定到位。

有什么建议吗？

$(document).ready(function() {
  $("article").css("height", $(window).height() + "px");
  $("#content").sectionsnap({
    delay : 100
    , selector : 'article'
    , reference : 1
    , animationTime : 600
  });
});

(function($) {
$.fn.sectionsnap = function( options ) {

    var $wrapper = this
    , direction = 'down'
    , currentScrollTop = $("section").scrollTop()
    , scrollTimer
    , animating = false;

    // check the direction
    var updateDirection = function() {
        if ($("section").scrollTop() >= currentScrollTop)
            direction = 'down';
        else
            direction = 'up';
        currentScrollTop = $("section").scrollTop();
    }

    // return the closest element (depending on direction)
    var getClosestElement = function() {
        var $list = $wrapper.find(settings.selector)
        , wt = $("section").scrollTop()
        , wh = $("section").height()
        , refY = wh * settings.reference
        , wtd = wt + refY - 1
        , $target;

        if (direction == 'down') {
            $list.each(function() {
                var st = $(this).position().top;
                if ((st > wt) && (st <= wtd)) {
                    $target = $(this);
                    return false; // just to break the each loop
                }
            });
        } else {
            wtd = wt - refY + 1;
            $list.each(function() {
                var st = $(this).position().top;
                if ((st < wt) && (st >= wtd)) {
                    $target = $(this);
                    return false; // just to break the each loop
                }
            });
        }
        return $target;
    }

    // snap
    var snap = function() {
        var $target = getClosestElement();
        if ($target) {
            animating = true;
            $('html, body').animate({
                    scrollTop: ($target.offset().top)
                }, settings.animationTime, function() {
                    window.clearTimeout(scrollTimer);
                    animating = false;
                });
        }
    }
    // on window scroll
    $("section").scroll(windowScroll);
    return this;
};
})(jQuery);

非常感谢任何建议

Answer 1

1. 使用 animate() 函数而不是 scrollTop() 来制作动画，而不是立即从一个部分捕捉到另一个部分。

2. 考虑对平滑和非线性动画使用缓动，如果您将使用 jQuery 制作动画，则可以使用此 jQuery easing plugin - [ CDN ]

3. 要获得更流畅的动画效果，您可以使用其他库，例如 GSAP或 Velocityjs ，两者都带有内置缓动功能，因此您无需为此使用外部包。

4. 在我的代码中创建一个名为 isScrolling 的标志是必不可少的，以检查当前页面是否正在滚动我们不应该比较 .scrollTop() 当前部分的 .offset().top 的值 直到滚动动画结束，然后我们重新开始。

---

示例 1:使用带缓动功能的 jQuery .animate() 函数

jsFiddle - editor

jsFiddle - fullscreen

var sections = $('.sections'),
  win = $(window),
  index = 0,
  isScrolling = false;  // will be used to check whether the page is scrolling or not


// on window scroll, we capture the scroll top and the current section's top
win.on('scroll', function() {
  var winTop = win.scrollTop(),
    secTop = $(sections[index]).offset().top;

  // if page is currently scrolling, we do nothing and wait until scrolling ends
  if (!isScrolling) {

    // if is scrolling is false, and window ".scrollTop()" is more than current
   // section ".offset().top" value, we set the "isScrolling" to true so that
   // we make any scrolling decisions until the animation ends, call the animation
   // function passing the value of the next next section's ".offset().top", also 
   // increase the "index" value.
    if (winTop > secTop) {
      isScrolling = true;
      animateScrolling($(sections[index + 1]).offset().top);
      index += 1;
    }

    // same as above except we check if the window ".scrollTop()" is *less* than
    // the current section's "scrollTop()", set "isScrolling = false" and animate the
    // scroll to the previous section's "offset().top", and decrease the index value.
    if (winTop < secTop) {
      isScrolling = 1;
      animateScrolling($(sections[index - 1]).offset().top);
      index -= 1;
    }
  }
});


// instead of "win.scrollTop()" we use ".animate()" function for smooth scrolling and
// making use of a the callback function, which get executed *after* the animation
// ends, we set our scrolling flag "isScrolling" to false for further animations.
   // we use easing too, "easeInOutCubic" here, for smooth animation

function animateScrolling(secTop) {
  $('html, body').animate({ scrollTop: secTop }, 500, 'easeInOutCubic', function() {
    isScrolling = false;
  });
}

body { margin: 0; padding: 0; }
.sections { width: 100%; height: 100vh; background-color: orange; display: block; }
.two { background-color: tomato; }
.three { background-color: skyblue; }

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js">
</script>
<div class="sections"></div>
<div class="sections two"></div>
<div class="sections three"></div>

---

示例 2: 使用内置缓动的 GSAP TweenMax 函数，虽然 GSAP 与 jQuery 配合得很好，但下面我使用纯 javascript 来选择元素而不是 jQuery。

CodePen - editor

CodePen - fullscreen

var sections = document.querySelectorAll('.sections'),
  HTMLbody = document.querySelectorAll('html, body'),
  index = 0,
  isScrolling = false;

window.addEventListener('scroll', function() {   
  // Get the window scrollTop value, from:
  // stackoverflow.com/questions/3464876/javascript-get-window-x-y-position-for-scroll
  var winTop = (window.pageYOffset || document.scrollTop) - (document.clientTop || 0),
  // ---------------------------------------------------------------------------------
    secTop = sections[index].offsetTop;

  if (!isScrolling) {
    if (winTop > secTop) {
      isScrolling = true;
      animateScrolling(sections[index + 1].offsetTop);
      index += 1;
    }
    if (winTop < secTop) {
      isScrolling = 1;
      animateScrolling(sections[index - 1].offsetTop);
      index -= 1;
    }
  }
});

function animateScrolling(secTop) {
  TweenMax.to(HTMLbody, 0.5, {
    scrollTop: secTop,
    ease: Power3.easeInOut,
    onComplete: setFlagToFalse
  });
}

function setFlagToFalse() {
  isScrolling = false;
}