javascript - 在滚动停止处捕捉滚动

Question

查找下面的图像引用:

我真正想要的是当窗口 View 中只有一个部分(第 4 部分)出现在 40% - 80% 左右时。在滚动停止时，第4部分应该自动滚动以适应窗口。

这里，基本的 fiddle 没有任何脚本。

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

<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>

我尝试过jqueryvisible插件，但没有帮助。所以我发表了评论。

/*
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进行比较.

请注意，ratio 决定了元素在屏幕上可见的程度(大于 0.6 用于确定是否超过 60% 的 section 在屏幕上可见) )。

请参阅下面的演示，其中包含内嵌注释:

/*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));

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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>