主页 / 问题 / 834765
Accepted
Азамат Шарафутдинов
Asked:2020-05-29 11:14:57 +0000 UTC2020-05-29 11:14:57 +0000 UTC

滚动上的逐步块更改

  • 772

大家好。有一个脚本可以在滚动时改变屏幕，但是如果你用力滚动，它会滚动到最后，但是在任何滚动速度下你只需要改变屏幕1次。请告诉我。谢谢

$('#myContainer').bind('mousewheel', function(e) {
  var sec_1 = $(".section");
  let main__current = $('.main__current');
  if (e.originalEvent.wheelDelta / 120 > 0) {
    if (main__current.is(':first-child')) {
      return;
    }
    main__current.removeClass("main__current").addClass("main__next")
    main__current.prev().addClass("main__current").removeClass("main__next main__previous")
    
  } else {
    if (main__current.is(':last-child')) {
      return;
    }
    main__current.removeClass("main__current").addClass("main__previous");
    main__current.next().addClass("main__current").removeClass("main__next main__previous")
  }
});
body {
  overflow: hidden
}

.main__section {
  position: absolute;
  left: 0;
  width: 100vw;
  height: 100vh;
  -webkit-transition: top .3s linear;
  transition: top .3s linear;
}

.main__previous {
  top: -100%;
}

.main__current {
  z-index: 1;
  top: 0;
}

.main__next {
  top: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myContainer">
  <div class="section section_1 main__section main__current">
    1
  </div>
  <div class="section section_2 main__section main__next">
    2
  </div>
  <div class="section section_3 main__section main__next">
    3
  </div>
</div>

javascript

1 个回答

  1. Best Answer

    var func = function(e) {

  setTimeout(function() {
    $('#myContainer').one('mousewheel', func);
  }, 500);

  var sec_1 = $(".section");
  let main__current = $('.main__current');
  if (e.originalEvent.wheelDelta / 120 > 0) {
    if (main__current.is(':first-child')) {
      return;
    }
    main__current.removeClass("main__current").addClass("main__next")
    main__current.prev().addClass("main__current").removeClass("main__next main__previous")

  } else {
    if (main__current.is(':last-child')) {
      return;
    }
    main__current.removeClass("main__current").addClass("main__previous");
    main__current.next().addClass("main__current").removeClass("main__next main__previous")
  }


};

$('#myContainer').one('mousewheel', func);
    body {
  overflow: hidden
}

.main__section {
  position: absolute;
  left: 0;
  width: 100vw;
  height: 100vh;
  -webkit-transition: top .3s linear;
  transition: top .3s linear;
}

.main__previous {
  top: -100%;
}

.main__current {
  z-index: 1;
  top: 0;
}

.main__next {
  top: 100%;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myContainer">
  <div class="section section_1 main__section main__current">
    1
  </div>
  <div class="section section_2 main__section main__next">
    2
  </div>
  <div class="section section_3 main__section main__next">
    3
  </div>
</div>

    • 1

相关问题