捕捉滚动停止滚动

Question

查找以下图片参考：

我想要的只是当窗口视图中只有一个部分（第4节）大约40％ - 80％时。在scroll停止后，第4部分应自动滚动以适应window。

此处，没有任何脚本的基本 fiddle 。

＆＃13;

＆＃13;

body,
html {
  height: 100%;
  margin: 0;
}
.sections {
  height: 100%;
  background: #000;
  opacity: 0.7;
}
#section2 {
  background: #ccc;
}
#section3 {
  background: #9c0;
}
#section4 {
  background: #999;
}
#section4 {
  background: #ddd;
}

＆＃13;

<div class="sections" id="section1"></div>
<div class="sections" id="section2"></div>
<div class="sections" id="section3"></div>
<div class="sections" id="section4"></div>
<div class="sections" id="section5"></div>

＆＃13;

＆＃13;

＆＃13;

我尝试了jquery visible插件，但它没有帮助。所以我已经评论了一个。

/*
var ww = $(window).width();
$(window).scroll(function(){
  if ($('#section3').visible(true)) {
    $('body, html').animate({scrollTop: $('#section4').offset().top});
  }else if($('#section5').visible(true)) {
  $('body, html').animate({scrollTop: $('#section4').offset().top});    
  }
});
*/

Answer 1

使用脚本将屏幕的scrollTop与offset().top和height的{​​{1}}进行比较。

请注意section确定屏幕上元素的显示量（大于0.6用于确定屏幕上是否有超过60％的ratio可见。）

请参阅下面的演示，内联评论：

＆＃13;

＆＃13;

section

＆＃13;

/*debouce (courtesy:underscore.js)*/
function debounce(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this,
      args = arguments;
    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};

// scroll listener
$(window).scroll(debounce(function() {
  var $window = $(window);
  // change this to '.sections' if you want the effect for all sections
  $('#section4').each(function() {
    var top_of_element = $(this).offset().top;
    var bottom_of_element = $(this).offset().top + $(this).outerHeight();
    var bottom_of_screen = $window.scrollTop() + $window.height();
    var top_of_screen = $window.scrollTop();
    var height_of_element = $(this).outerHeight();

    // if element below top of screen
    if (top_of_element > top_of_screen && bottom_of_screen < bottom_of_element) {
      var ratio = (bottom_of_screen - top_of_element) / height_of_element;
      if (ratio > 0.6) {
        // animate by scrolling up
        $('body, html').animate({
          scrollTop: $(this).offset().top
        });
      }

    }
    // if element above top of screen
    else if (bottom_of_element > top_of_screen && bottom_of_screen > bottom_of_element) {
      var ratio = (bottom_of_element - top_of_screen) / height_of_element;
      if (ratio > 0.6) {
        // animate by scrolling down
        $('body, html').animate({
          scrollTop: $(this).offset().top
        });
      }
    }
  });
}, 250));

＆＃13;

body,
html {
  height: 100%;
  margin: 0;
}
.sections {
  height: 100%;
  background: #000;
  opacity: 0.7;
}
#section2 {
  background: #ccc;
}
#section3 {
  background: #9c0;
}
#section4 {
  background: #999;
}
#section4 {
  background: #ddd;
}

＆＃13;

＆＃13;

＆＃13;