Question

尝试创建视差页面并在每个鼠标滚轮上，页面将滚动到下一个div（块）

我尝试使用以下代码，但没有运气，任何人都可以建议。

这是工作JSFiddle demo，（我还添加了mousewheel插件）

＆＃13;

$(document).ready(function() {
  $('section').css({
    'height': (($(window).height())) + 'px'
  });

  // Now bind the event to the desired element
  $('section').bind('mousewheel', function(e) {
    if (e.wheelDelta / 120 > 0) {
      $(this).text('scrolling up !');
    } else {
      $(this).text('scrolling down !');
    }
  });
});

$(window).resize(function() { // On resize
  $('section').css({
    'height': (($(window).height())) + 'px'
  });

});

＆＃13;

.container-fluid {
  padding: 0;
}
section {
  float: left;
  width: 100%;
  position: relative;
}
.screenOne {
  background-color: rgba(0, 0, 0, 0.7);
}
.screenTwo {
  background-color: rgba(0, 0, 0, 0.6);
}
.screenThree {
  background-color: rgba(0, 0, 0, 0.4);
}
.screenFour {
  background-color: rgba(0, 0, 0, 0.3);
}
.screenFive {
  background-color: rgba(0, 0, 0, 0.2);
}
.screenSix {
  background-color: rgba(0, 0, 0, 0.1);
}
h1 {
  text-align: center;
  color: #ff0000;
  margin: 25% 0 0 0;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
  <section class="screenOne">
    <h1>One</h1>
  </section>
  <section class="screenTwo">
    <h1>Two</h1>
  </section>
  <section class="screenThree">
    <h1>Three</h1>
  </section>
  <section class="screenFour">
    <h1>Four</h1>
  </section>
  <section class="screenFive">
    <h1>Five</h1>
  </section>
  <section class="screenSix">
    <h1>Six</h1>
  </section>
</div>

＆＃13;

Answer 1

这应该有效：https://jsfiddle.net/jtpbq9zf/

有关 event.originalEvent.wheelDelta

的信息，请参阅event.wheelDelta returns undefined

$(function(){
  $('section').css({'height':(($(window).height()))+'px'});
  // Now bind the event to the desired element
  $('section').on('mousewheel', function(e){
    e.preventDefault();
    if(e.originalEvent.wheelDelta < 0) {
      if (!$(this).is(':last-child'))
        $('body').scrollTop($(this).next().offset().top);
    } else {
      if (!$(this).is(':first-child'))
        $('body').scrollTop($(this).prev().offset().top);
      }
  });
  $(window).resize(function(){ // On resize
      $('section').css({'height':(($(window).height()))+'px'});
  });
});

平滑版

只需替换$('body').scrollTop($(this).next().offset().top);

即可

$('body').animate({scrollTop:$(this).next().offset().top}, '700');

..当然要看 prev（）和 next（）元素。

滚动到mousewheel jQuery上的下一个div

1 个答案: