主页 / 问题 / 834539
Accepted
Азамат Шарафутдинов
Asked:2020-05-28 20:55:39 +0000 UTC2020-05-28 20:55:39 +0000 UTC

滚动屏幕变化

  • 772

有一项任务是滚动时屏幕会发生变化。仅工作 1 次。需要添加什么才能使其始终有效？

$('#myContainer').bind('mousewheel', function(e){
            var sec_1 = $(".section");
            if(e.originalEvent.wheelDelta / 120 > 0) {
                sec_1.prev().addClass("main__current").removeClass("main__previous main__previous")
                sec_1.next().filter(':first').removeClass("main__current").addClass("main__next")
            }
            else {
                if(sec_1.hasClass("main__current" )) {
                    sec_1.prev().removeClass("main__current").addClass("main__previous")
                    sec_1.next().filter(':first').addClass("main__current").removeClass("main__next main__previous")
                }
                else {
                    console.log(false)
                }
            }
        });
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>

jquery

1 个回答

  1. Best Answer

    $('#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>

    • 2

相关问题