如何删除某些具有特定ID的div上的视差功能？

Question

我有此代码：

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

我写道，当光标位于id =“ main”上时，如果您转动鼠标滚轮，则视差将起作用。它运作良好。但是...在div id =“ main”内有滚动的女神（例如div id =“ scroll”）。

如何使Paralaks的功能不适用于此类divas？

更新：添加了一个示例！在第二页上，有一个带有文本和滚动的蓝色正方形，但是如果将鼠标指向它并使用鼠标滚轮，则该块（蓝色）将不会滚动，我们将移至另一页，具体取决于我们是否向上或向下转动滚轮。

// ------------- VARIABLES ------------- //
var isHorizontal = false;
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(isHorizontal) {
    isHorizontal = false;
    return;
  }
  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";
var bey = document.getElementById( 'main' );
bey.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");
}


// SWIPE MODE Rodichev Vladimir
// at least 100 px are a swipe
// you can use the value relative to screen size: window.innerWidth * .1
const offset = 100;
let xDown, yDown

window.addEventListener('touchstart', e => {
  const firstTouch = getTouch(e);

  xDown = firstTouch.clientX;
  yDown = firstTouch.clientY;
});

window.addEventListener('touchend', e => {
  if (!yDown) {
    return;
  }

  const {
    clientY: yUp
  } = getTouch(e);
  const yDiff = yDown - yUp;
  const yDiffAbs = Math.abs(yDown - yUp);

  // at least <offset> are a swipe
  if (Math.max(yDiffAbs) < offset ) {
    return;
  }


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

function getTouch (e) {
  return e.changedTouches[0]
}

@import url(https://fonts.googleapis.com/css?family=Montserrat);
html, body {
  overflow: hidden;
}

.background {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  overflow: hidden;
  will-change: transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  height: 130vh;
  position: fixed;
  width: 100%;
  -webkit-transform: translateY(30vh);
          transform: translateY(30vh);
  transition: all 1.2s cubic-bezier(0.22, 0.44, 0, 1);
}
/*.background:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
}*/
.background:first-child {
  background-image: url(https://i.postimg.cc/kXq9Qmnj/bgd1.jpg);
  -webkit-transform: translateY(-15vh);
          transform: translateY(-15vh);
}
.background:first-child .content-wrapper {
  -webkit-transform: translateY(15vh);
          transform: translateY(15vh);
}
.background:nth-child(2) {
  background-image: url(https://i.postimg.cc/W14vywqg/photo-1424746219973-8fe3bd07d8e3.jpg);
}
.background:nth-child(3) {
    background-image: url(https://i.postimg.cc/TY0xQ41T/photo-1433840496881-cbd845929862.jpg);
}
/* Set stacking context of slides */
.background:nth-child(1) {
  z-index: 3;
}
.poscustomtext {
    display: flex;
    justify-content: center;
    align-items: center;
}
.background:nth-child(3) .content-wrapper {
    height: 100vh;
    display: flex;
    justify-content: center;
    text-align: left;
    flex-flow: column nowrap;
    color: #fff;
    font-family: Arial;
    text-transform: none;
    -webkit-transform: translateY(40vh);
    transform: translateY(40vh);
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: all 1.7s cubic-bezier(0.22, 0.44, 0, 1);
}
.background:nth-child(2) {
  z-index: 2;
}

.background:nth-child(3) {
  z-index: 1;
}

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

.background.up-scroll {
  -webkit-transform: translate3d(0, -15vh, 0);
          transform: translate3d(0, -15vh, 0);
}
.background.up-scroll .content-wrapper {
  -webkit-transform: translateY(15vh);
          transform: translateY(15vh);
}
.background.up-scroll + .background {
  -webkit-transform: translate3d(0, 30vh, 0);
          transform: translate3d(0, 30vh, 0);
}
.background.up-scroll + .background .content-wrapper {
  -webkit-transform: translateY(30vh);
          transform: translateY(30vh);
}

.background.down-scroll {
  -webkit-transform: translate3d(0, -130vh, 0);
          transform: translate3d(0, -130vh, 0);
}
.background.down-scroll .content-wrapper {
  -webkit-transform: translateY(40vh);
          transform: translateY(40vh);
}
.background.down-scroll + .background:not(.down-scroll) {
  -webkit-transform: translate3d(0, -15vh, 0);
          transform: translate3d(0, -15vh, 0);
}
.background.down-scroll + .background:not(.down-scroll) .content-wrapper {
  -webkit-transform: translateY(15vh);
          transform: translateY(15vh);
}
article.mario {
    height: 100vh;
    width: calc(100vw - 0px);
    column-width: calc(100vw - 0px);
    column-gap: calc(5vw + 0px);
    /* column-gap: 317px; */
    column-rule: 2px dotted #ddd;
    overflow: auto;
    padding-top: 120px;
}
/*article.mario {
  height: 100vh;
  width: 100vw;
  column-width: 100vw;
  column-gap: 5vw;
  column-rule: 2px dotted #ddd;
  text-align: justify;
  overflow: auto;
  margin: auto;
}*/
article.mario {
    height: 80vh;
    width: calc(80vw - 0px);
    column-width: calc(80vw - 0px);
    column-gap: calc(5vw + 0px);
    /* column-gap: 317px; */
    column-rule: 2px dotted #ddd;
    overflow: auto;
    padding: 0 20px;
    border: solid 8px black;
}
article.mario:hover {
    border: solid 8px gold;
}
.emphase {
  display: block;
  background-color: #DDD;
  text-align: center;
  font-weight: bold;
}

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Full Page Parallax Scroll Effect</title>
  
  <style>
    html, body {
      position: relative;
      height: 100%;
    }
    body {
      margin: 0;
      padding: 0;
    }
    .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
	
.lr2 {
    width: 100%;
    display: flex;
}
.container.n1{
    width: 25%;
    background: yellow;
    height: 100vh;
}
.container.n2{
    width: 75%;
}
.bsb {
    width: 200px;
    height: 200px;
    background-color: blue;
    overflow-y: auto;
}
  </style>  
</head>

<body>
<div class="lr2">
  <div class="container n1"></div><div class="container n2" id="main">
  <section class="background">
    <div class="content-wrapper">
      <p class="content-title">Full Page Parallax Effect</p>
      <p class="content-subtitle">Scroll down and up to see the effect!</p>
    </div>
  </section>
  <section class="background">
    <div class="content-wrapper">
<div class="bsb" id="scroll">Scroll down and up to see the effect! Тест тест Тест тест Тест тест Тест тест Scroll down and up to see the effect!
Scroll down and up to see the effect! Тест тест Тест тест Тест тест Тест тест Scroll down and up to see the effect!
Scroll down and up to see the effect! Тест тест Тест тест Тест тест Тест тест Scroll down and up to see the effect!
Scroll down and up to see the effect! Тест тест Тест тест Тест тест Тест тест Scroll down and up to see the effect!
Scroll down and up to see the effect! Тест тест Тест тест Тест тест Тест тест Scroll down and up to see the effect!
Scroll down and up to see the effect! Тест тест Тест тест Тест тест Тест тест Scroll down and up to see the effect!
</div>
	</div>
  </section>
  <section class="background">
    <div class="content-wrapper">
      </div>
  </section>
</div></div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js'></script>
<script src='https://code.jquery.com/jquery-2.1.4.min.js'></script>




</body>

</html>