使用onscroll或类似事件滚动到元素

Question

当我使用滚动条或鼠标滚轮而另一个元素占据屏幕时，我希望将大页面向下滚动到预定义元素。换句话说，当我刚刚开始滚动时，我需要将页面自动滚动到某个元素。

假设有几个DIV，每个都占据整个视口以方便测试。当 div_1 可见时，我希望只需点击一下鼠标滚轮或滚动条就可以滚动到 div_3 。

我可以通过单击ancore元素轻松完成此操作，但当我将 onclick 更改为 onscroll 时，无效。

document.getElementById("div_1").onscroll = function() {myFunction()};
    function myFunction() {
        document.getElementById('div_3').scrollIntoView({behavior: "smooth"});
    }

以下是JSFiddle， onclick 而不是 onscroll ，只是为了确保脚本正常运行。

我错过了什么？

Answer 1

这样的事情怎么样？

＆＃13;

＆＃13;

$(document).on('mousewheel DOMMouseScroll', function() {
  if ($("#div_1").isInViewport()) {
    smoothScroll();
  }
});

function smoothScroll() {
  $('html, body').animate({
    scrollTop: $("#div_3").offset().top
  }, 1000);
}

$.fn.isInViewport = function() {
  var elementTop = $(this).offset().top;
  var elementBottom = elementTop + $(this).outerHeight();
  var viewportTop = $(window).scrollTop();
  var viewportBottom = viewportTop + $(window).height();
  return elementBottom > viewportTop && elementTop < viewportBottom;
};

＆＃13;

div#div_1 {
  background: rgb(255, 0, 0);
  height: 100vh;
  width: 100%;
}

div#div_2 {
  background: rgb(0, 0, 255);
  min-height: 100vh;
  width: 100%;
}

div#div_3 {
  background: rgb(0, 255, 0);
  min-height: 100vh;
  width: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div_1"></div>
<div id="div_2"></div>
<div id="div_3"></div>

＆＃13;

＆＃13;

＆＃13;

修改

好吧，我想我终于做到了:) JSFiddle

＆＃13;

＆＃13;

var scrolling = false;

$(document).on('scroll', function() {
  if ($("#div_1").isInViewport()) {
    smoothScroll();
  }
});

function smoothScroll() {
  if (!scrolling) {
  	scrolling = true;
    $('html, body').animate({
      scrollTop: $("#div_3").offset().top
    }, 1000, function() {
      scrolling = false;
    });
  }
}

$.fn.isInViewport = function() {
  var elementTop = $(this).offset().top;
  var elementBottom = elementTop + $(this).outerHeight();
  var viewportTop = $(window).scrollTop();
  var viewportBottom = viewportTop + $(window).height();
  return elementBottom > viewportTop && elementTop < viewportBottom;
};

＆＃13;

div#div_1 {
  background: rgb(255, 0, 0);
  height: 100vh;
  width: 100%;
}

div#div_2 {
  background: rgb(0, 0, 255);
  min-height: 100vh;
  width: 100%;
}

div#div_3 {
  background: rgb(0, 255, 0);
  min-height: 100vh;
  width: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div_1"></div>
<div id="div_2"></div>
<div id="div_3"></div>

＆＃13;

＆＃13;

＆＃13;

如果您想要改变它发生的时刻（现在当div_1在视口中时发生），请更改$.fn.isInViewport功能。

例如，如果您希望在div_1的顶部可见时发生，请返回此return elementTop > viewportTop;

＆＃13;

＆＃13;

var scrolling = false;

$(document).on('scroll', function() {
  if ($("#div_1").isInViewport()) {
    smoothScroll();
  }
});

function smoothScroll() {
  if (!scrolling) {
  	scrolling = true;
    $('html, body').animate({
      scrollTop: $("#div_3").offset().top
    }, 1000, function() {
      scrolling = false;
    });
  }
}

$.fn.isInViewport = function() {
  var elementTop = $(this).offset().top;
  var elementBottom = elementTop + $(this).outerHeight();
  var viewportTop = $(window).scrollTop();
  var viewportBottom = viewportTop + $(window).height();
  return elementTop > viewportTop;
};

＆＃13;

div#div_1 {
  background: rgb(255, 0, 0);
  height: 100vh;
  width: 100%;
}

div#div_2 {
  background: rgb(0, 0, 255);
  min-height: 100vh;
  width: 100%;
}

div#div_3 {
  background: rgb(0, 255, 0);
  min-height: 100vh;
  width: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div_1"></div>
<div id="div_2"></div>
<div id="div_3"></div>

＆＃13;

＆＃13;

＆＃13;