滚动到下一个divs on mousewheel jQuery [英] scroll to next divs on mousewheel jQuery

问题描述

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

我试过下面的代码，但没有运气，任何人都可以建议。

这里是工作 JSFiddle演示，（我也添加了mousewheel插件）

  $（document）.ready（function（）{$（'section'）。css（{'height'：（（$（window）.height 'px'}; //现在将事件绑定到所需的元素$（'section'）。bind（'mousewheel'，function（e）{if（e.wheelDelta / 120> 0）{$ .text（'scrolling up！'）;} else {$（this）.text（'scrolling down！'）;}}）;}）; （'section'）。css（{'height'：（（$（window）.height（）））+'px'}）;}）;  

pre class =snippet-code-css lang-css prettyprint-override> .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）;} rgba（0，0，0，0.4）;}。screenFour {background-color：rgba（0，0，0，0.3）;} screenFive {background-color： .screenSix {background-color：rgba（0，0，0，0.1）;} h1 {text-align：center; color：＃ff0000; margin：25％0 0 0;}

 < 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>一个< / h1> < / section> < section class =screenTwo> < h1>两个< / h1> < / section> < section class =screenThree> < h1>三< / h1> < / section> < section class =screenFour> < h1>四< / h1> < / section> < section class =screenFive> < h1>五< / h1> < / section> < section class =screenSix> < h1>六< / h1> < / section>< / div>  

解决方案

这应该能正常工作： https://jsfiddle.net/jtpbq9zf/

请参阅 event.wheelDelta returns undefined for event.originalEvent.wheelDelta

  $（function b $ b $（'section'）。css（{'height'：（（$（window）.height（）））+'px'}）; 
 //现在将事件绑定到所需的元素
 $（'section'）。on（'mousewheel'，function（e）{
 e.preventDefault（）; 
 if（e.originalEvent.wheelDelta< 0）{
 if（！$（this）.is（'：last-child'））
 $（'body'）。scrollTop（$（this）.next（）。offset b $ b} else {
 if（！$（this）.is（'：first-child'））
 $（'body'）。scrollTop（$（this）.prev offset（）。top）; 
} 
}）; 
 $（window）.resize（function（）{//关于resize 
 $ （{'height'：（（$（window）.height（）））+'px'}）; 
}）; 
}）; 
  

平滑版 b $ b

只要替换 $（'body'）。scrollTop（$（this）.next（）。offset ; $（'body'）。

当然，请查看 prev（）。 元素。

Trying to create a parallax page and on each mousewheel, page would scroll to next div (block)

I tried with the following code but no luck, can anyone please suggest.

Here is the working JSFiddle demo, (I have added mousewheel plugin as well)

$(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'
  });

});

.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;
}

<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>

解决方案

This should work: https://jsfiddle.net/jtpbq9zf/

Refer to event.wheelDelta returns undefined for event.originalEvent.wheelDelta

$(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'});
  });
});

Smooth version

Just replace $('body').scrollTop($(this).next().offset().top);

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

..of course look at prev() and next() elements.

这篇关于滚动到下一个divs on mousewheel jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！