jquery - 当 div 出现在视口(viewport)中时滚动到顶部

Question

很难找到有关此技术的在线资源。

在我的JSFiddle用户可以使用“下一个”或“上一个”来循环浏览全屏 div。用户还可以滚动到下一个或上一个 div。

我的问题是，如果用户滚动，那么他们很难将全屏 div 与视口(viewport)对齐，所以我希望当用户在屏幕上显示大部分 div 时，它会自动滚动以对齐顶部div 与视口(viewport)。

在我的 JSFiddle 中，我包含了一个脚本，用于检测元素是否在视口(viewport)中，该脚本有效，但我不知道如何添加 if 语句，当 div 出现时到视口(viewport)，使用 .scrollTo 将 div 对齐到屏幕顶部。

Answer 1

你可以使用 jQuery inview

然后像这样运行 scrollTo:

$(elm).bind('inview', function(event, visible) {
  if (visible) {
    scrollTo();
  } else {
  }
});

可能还想在调整窗口大小时运行它:

var timerDelay = (function(){
  var timer = 0;
  return function(callback, ms){
    clearTimeout (timer);
    timer = setTimeout(callback, ms);
  };
})();



$(window).resize(function() {
   timerDelay(function(){

   //run inview function

   }, 500);
 });