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

使用animate()函数代替scrollTop()来制作动画，而不是在某个部分之间立即捕捉。
考虑使用缓动来进行平滑和非线性动画，如果您使用jQuery做动画，则可以使用此jQuery easing plugin - [CDN]
对于更流畅的动画，您可以使用其他库，例如GSAP或Velocityjs，这两个库都带有内置缓动功能，因此您不需要使用外部包。< / p>
在我的代码中创建一个名为isScrolling的标志，检查当前页面是否正在滚动，我们不应该将.scrollTop()值与当前值进行比较在滚动动画结束之前，<{1}} 部分，然后我们重新开始。

示例1：使用带缓动的jQuery .offset().top函数

jsFiddle - editor

jsFiddle - fullscreen

＆＃13;

.animate()

＆＃13;

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;
  });
}

＆＃13;

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

＆＃13;

示例2：使用内置缓动的GSAP <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>函数，虽然GSAP与jQuery的效果非常好，但下面我使用纯javascript来选择元素而不是jQuery。

CodePen - editor

CodePen - fullscreen

TweenMax

捕捉到没有窗口滚动的部分

1 个答案: