视差滚动和抽屉菜单的问题

Question

我在主页上有一个使用视差滚动的网站。这是我的代码：

<div class="container">
  <section class="background">
    <div class="content-wrapper">
    <a href="#">Shop</a>
    </div>
  </section>
  <section class="background">
    <div class="content-wrapper">
      <a href="#">Shop</a>
    </div>
  </section>
  <section class="background">
    <div class="content-wrapper">
<a href="#">Shop</a>
    </div>
  </section>
  <section class="background">
    <div class="content-wrapper">
<a href="#">Shop</a>
    </div>
  </section>
</div>

CSS：

// ------------- VARIABLES ------------- //
$parallax-offset: 30vh;
$content-offset: 40vh;
$transition-speed: 1.2s;
$slide-number: 3;

html, body {
  overflow: hidden;
}

.background {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  overflow: hidden;
  will-change: transform;
  backface-visibility: hidden;
  height: 100vh + $parallax-offset;
  position: fixed;
  width: 100%;
  transform: translateY($parallax-offset);
  @include transition($transition-speed, all, cubic-bezier(0.22, 0.44, 0, 1));
  &:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,.3);
  }
  &:first-child {
    background-image: url(image.png);
    transform: translateY(-$parallax-offset / 2);
    .content-wrapper {
      transform: translateY($parallax-offset /2);
    }
  }
  &:nth-child(2) {
    background-image: url(image.png);
  }
  &:nth-child(3) {
    background-image: url(image.png);
  }
  &:nth-child(4) {
    background-image: url(image.png);
  }
}

/* Set stacking context of slides */
@for $i from 1 to ($slide-number + 1) {
    .background:nth-child(#{$i}) {
        z-index: ($slide-number + 1) - $i;
    }
}

.content {
  &-wrapper {
  height: 100vh;
  display: flex;
  justify-content: center;
  text-align: center;
  flex-flow: column nowrap;
  color: #fff;
  font-family: Montserrat;
  text-transform: uppercase;
  transform: translateY($content-offset);
  will-change: transform;
  backface-visibility: hidden;
  @include transition($transition-speed + .5, all, cubic-bezier(0.22, 0.44, 0, 1));
  }
  &-title {
    font-size: 12vh;
    line-height: 1.4;
  }
}

// ------------- SET TRANSFORM VALUES ------------- //

.background.up-scroll {
  transform: translate3d(0,-$parallax-offset / 2,0);
  .content-wrapper {
    transform: translateY($parallax-offset / 2);
  }
  + .background {
    transform: translate3d(0,$parallax-offset,0);
      .content-wrapper {
        transform: translateY($parallax-offset);
      }
    }
}

.background.down-scroll {
  transform: translate3d(0,-(100vh + $parallax-offset),0);
  .content-wrapper {
    transform: translateY($content-offset);
  }
  + .background:not(.down-scroll) {
    transform: translate3d(0,-$parallax-offset / 2,0);
      .content-wrapper {
        transform: translateY($parallax-offset / 2);
      }
  }
}

和JS：

// ------------- VARIABLES ------------- //
var ticking = false;
var isFirefox = (/Firefox/i.test(navigator.userAgent));
var isIe = (/MSIE/i.test(navigator.userAgent)) || (/Trident.*rv\:11\./i.test(navigator.userAgent));
var scrollSensitivitySetting = 30; //Increase/decrease this number to change sensitivity to trackpad gestures (up = less sensitive; down = more sensitive) 
var slideDurationSetting = 600; //Amount of time for which slide is "locked"
var currentSlideNumber = 0;
var totalSlideNumber = $(".background").length;

// ------------- DETERMINE DELTA/SCROLL DIRECTION ------------- //
function parallaxScroll(evt) {
  if (isFirefox) {
    //Set delta for Firefox
    delta = evt.detail * (-120);
  } else if (isIe) {
    //Set delta for IE
    delta = -evt.deltaY;
  } else {
    //Set delta for all other browsers
    delta = evt.wheelDelta;
  }

  if (ticking != true) {
    if (delta <= -scrollSensitivitySetting) {
      //Down scroll
      ticking = true;
      if (currentSlideNumber !== totalSlideNumber - 1) {
        currentSlideNumber++;
        nextItem();
      }
      slideDurationTimeout(slideDurationSetting);
    }
    if (delta >= scrollSensitivitySetting) {
      //Up scroll
      ticking = true;
      if (currentSlideNumber !== 0) {
        currentSlideNumber--;
      }
      previousItem();
      slideDurationTimeout(slideDurationSetting);
    }
  }
}

// ------------- SET TIMEOUT TO TEMPORARILY "LOCK" SLIDES ------------- //
function slideDurationTimeout(slideDuration) {
  setTimeout(function() {
    ticking = false;
  }, slideDuration);
}

// ------------- ADD EVENT LISTENER ------------- //
var mousewheelEvent = isFirefox ? "DOMMouseScroll" : "wheel";
window.addEventListener(mousewheelEvent, _.throttle(parallaxScroll, 60), false);

// ------------- SLIDE MOTION ------------- //
function nextItem() {
  var $previousSlide = $(".background").eq(currentSlideNumber - 1);
  $previousSlide.removeClass("up-scroll").addClass("down-scroll");
}

function previousItem() {
  var $currentSlide = $(".background").eq(currentSlideNumber);
  $currentSlide.removeClass("down-scroll").addClass("up-scroll");
}

这很好用，但是我遇到了一个问题，因为我还有一个抽屉导航从侧面弹出。为了启用滚动，导航设置为overflow:scroll，但是我的问题是，当您在导航上滚动时，侧面的视差图像也在滚动。 想知道是否有人曾经遇到过类似的问题并设法解决？