在鼠标滚动时向上滑动和向下滑动

Question

我在一个页面中创建了两个 div。当我向下滚动时，第一个 div .first-box 会向上滑动。因此，当我向下滚动时，页面.main-container 会滚动。当我向上滚动页面滚动良好。但是，当.main-container 到达顶部并且我向上滚动时，我希望.first-box 向下滑动，但这不起作用。

我对 jQuery 没有深入的了解，但我使用了以下内容。请帮助我改进它，以便当.main-container 的位置位于窗口顶部时，第一个 div 会向下滑动。

我希望第一个 div 在主容器向上滚动后向下滑动。

$(window).bind('mousewheel DOMMouseScroll', function(event) {
  if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {
    // scroll up
    $(window).scroll(function() {
      if ($(this).scrollTop()) {
        $('.first-box').slideDown();
      }
    });
  } else {
    // scroll down
    $('.first-box').slideUp();
  }
});

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

p {
  padding: 10px 50px;
  font-size: 18px;
  font-family: Arial;
}

.first-box {
  position: fixed;
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
  color: #fff;
  z-index: 9;
}

.main-container {
  position: absolute;
  top: 20px;
  left: 20px;
  bottom: 20px;
  right: 20px;
  padding: 30px;
  overflow-y: scroll;
  overflow-x: hidden;
}


/* Let's get this party started */

 ::-webkit-scrollbar {
  width: 12px;
}


/* Track */

 ::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 10px;
  border-radius: 10px;
}


/* Handle */

 ::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: rgba(255, 0, 0, 0.8);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

 ::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(255, 0, 0, 0.4);
}

.second-box {
  width: 100%;
  height: 100%;
  background: red;
  color: #fff;
}

.third-box {
  width: 100%;
  height: 100%;
  background: yellow;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="first-box">first box</div>
<div class="main-container">
  <div class="second-box">
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
  </div>
  <div class="third-box">
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
  </div>
</div>

Answer 1

尝试使用event.originalEvent.wheelDelta < 0 || event.originalEvent.detail < 0

$(window).bind('mousewheel', function(event) {
  if (event.originalEvent.wheelDelta < 0 || event.originalEvent.detail < 0) {
    //scroll down
    $('.first-box').slideUp();
  } else {
    //scroll up
    if ($('.main-container')[0].scrollTop <= 100)
      $('.first-box').slideDown();
  }
});

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

p {
  padding: 10px 50px;
  font-size: 18px;
  font-family: Arial;
}

.first-box {
  position: fixed;
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
  color: #fff;
  z-index: 9;
}

.main-container {
  position: absolute;
  top: 20px;
  left: 20px;
  bottom: 20px;
  right: 20px;
  overflow-y: scroll;
  overflow-x: hidden;
}


/* Let's get this party started */

 ::-webkit-scrollbar {
  width: 12px;
}


/* Track */

 ::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 10px;
  border-radius: 10px;
}


/* Handle */

 ::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: rgba(255, 0, 0, 0.8);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

 ::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(255, 0, 0, 0.4);
}

.second-box {
  width: 100%;
  height: 100%;
  background: red;
  color: #fff;
}

.third-box {
  width: 100%;
  height: 100%;
  background: yellow;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="first-box">first box</div>
<div class="main-container">
  <div class="second-box">
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
  </div>
  <div class="third-box">
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
    <p>some text</p>
  </div>
</div>

Answer 2

$(function(){
    $(window).scroll(function(){
        if($(window).scrollTop()==0){
            if($('.main-container').scrollTop() ==0){
               $('.first-box').slideDown();
            }else{
               $('.first-box').slideUp();
            }
        }
    })
})

用这个替换你的js。 希望能帮到你。