javascript - 启用延迟/瞄准的小滚动全屏网站

Question

我创建了一个全屏网站(100% 高度和宽度)，带有 Bootstrap 及其超大屏幕功能。还添加了 10px 边框和 body padding

html

<div class="row">
  <div class="jumbotron indx-BG" >
     ...
  </div>
</div>

CSS

body { padding: 10px; }

.indx-BG {
 background: url('...') no-repeat center center;
 background-size: cover;
 min-height: calc(100vh - 20px);
 width: 100%;
}

按照我想要的方式工作。但是我想添加一个页脚(高度未知)，除非用户向下滚动才能看到。我希望视线保持响应和全屏，除非用户选择滚动，然后会显示小的额外页脚。

编辑 - 我希望滚动有一点延迟/动画，类似于那些向上/向下“插入”内容的 slider

Answer 1

希望这对您有所帮助。我添加了 2 个其他部分，以便您可以看到动画。代码检测滚动是从下到上还是从上到下。如果它检测到向上滚动，它将重新初始化滚动动画，当它检测到向下滚动时，它将动画滚动到页脚。

var domouse = true;
var content_down = $('footer').offset().top;
var content_up = $('div').offset().top;
$('body').on('mousewheel DOMMouseScroll', function(e) {

  if (e.originalEvent.wheelDelta > 0) {
    if (!domouse)
    return;
    domouse = false;
    $('html, body').animate({
      scrollTop: content_up
    }, 1000, function(){
      domouse = true;
    });
  } else {
    if (!domouse)
    return;
    domouse = false;
    $('html, body').animate({
      scrollTop: content_down
    }, 1000, function(){
      domouse = true;
    });
  }

});

div {
  width: 100%;
  height: 100vh;
  text-align: center;
  color: white;
  font-size: 32px;
  line-height: 100vh;
  background-color: black;
  background-size: cover;
}
footer {
  padding: 15px 0 15px 0;
  text-align: center;
  color: black;
  font-size: 20px;
}
body {
  overflow: hidden;
  margin: 0;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  main section
</div>
<footer>
  this is a footer
</footer>