javascript - 自动滚动到部分

Question

如果在 #banner 部分中将发生事件滚动，我需要从 #banner 部分自动平滑滚动到 #about-me 部分。

我试试这个:

$('#banner').bind('scroll', function(event) {
    $(window).scrollTo($('#about-me'), 500);
});

但它不起作用。 (我使用了scrollTo插件)。

#banner 高度 100vh。

Answer 1

您正在寻找的委托(delegate)是mousewheel。您需要使用e.preventDefault();来阻止浏览器的默认行为(滚动)。

工作演示:

$('#banner').bind('mousewheel DOMMouseScroll', function(e) {
  if (e.originalEvent.wheelDelta < 0) {
    e.preventDefault();
    $(window).scrollTo('#about-me', 500);
  }
});

body {
  margin:0;
}

div {
  width:100%;
  height:100vh;
}

#banner {
  background:red;
}

#about-me {
  background:green;
}

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="//cdn.jsdelivr.net/jquery.scrollto/2.1.2/jquery.scrollTo.min.js"></script>
<div id="banner"></div>
<div id="about-me"></div>

http://jsbin.com/dubaza/edit?html,css,js