title: Elements switch with mouse wheel
body: <h2>What I want to do</h2>
  
  <p>*Image when scrolling<br>
  Look at the moving sentences on the right.<br>
  <a href="https://i.stack.imgur.com/hg4lV.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hg4lV.gif" alt="switch scroll"></a><br>
  Like this, I want to highlight the <code>&lt;p&gt;</code> element each time scrolling.<br>
  That is, usually it's <code>opacity: 0.3;</code>, and when it's scrolled, it switches to <code>opacity: 1;</code> sequentially from the top.  </p>
  
  <p><a href="https://i.stack.imgur.com/kruLn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kruLn.png" alt="like this"></a>  </p>
  
  <p>I thought that I could do this using <a href="http://idangero.us/swiper/" rel="nofollow noreferrer">swiper.js</a>.  </p>
  
  <p><a href="https://i.stack.imgur.com/QbXv3.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QbXv3.gif" alt="now"></a><br>
  I feel like this now. Please look at the one on the right side this too.<br>
  If this slider wrap reaches the height of each <code>&lt;p&gt;</code> and stops the scroll with <code>preventDefault ()</code>, I thought that the implementation would be as expected.</p>
  
  <hr>
  
  <h2>What I tried</h2>
  
  <p>jQuery  ( Unfinished, this doesn't work )</p>
  
  <pre><code>$(function() {
    $(".mai").scroll(function() {
      onScroll();
    });
    onScroll();
  });
  
  function onScroll() {
    $(".main-p p").each(function(i) {
      $(".main-p p").eq(i).removeClass("hl");    // mean highlight
  
    var scrPos = $(".main-p p:nth-last-child(2)");
    // I want to be second from the bottom of the "visible range" of .mai, not of &lt;p&gt;
  
    if(scrPos &lt; active) {
      // If hl (= active) is above the second from the bottom of the range seen in .mai
  
      $('.mai').scroll(function(e) {
        e.preventDefault();
      });
    } else {
      $('.mai').scroll();
      // I want to return the scroll, but is this correct?
    }
  
    // I want to put processing to highlight with &lt;p&gt;, next &lt;p&gt;, next &lt;p&gt;..
    $('.main-p .active').addClass('hl');
  
    });
  }
  </code></pre>
  
  <hr>
  
  <h2>Add: Current status</h2>
  
  <p><a href="https://i.stack.imgur.com/JByfh.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JByfh.gif" alt="like this"></a><br>
  Please look at the right side.<br>
  The highlight is applied as it scroll in the image location on the left.<br>
  But doesn't apply if it scroll in the right sentence location.<br>
  And like on the way, if it press the slide navigation in the upper left, the image will move to that slide properly, but I would like to highlight the sentences as well. (Swiper is set to synchronize images and texts)  </p>
  
  <p>And I found something that looked good about what I said in the second image of this question (In fact "the middle of the frame" is good..). -> <a href="https://russellgoldenberg.github.io/scrollama/basic/" rel="nofollow noreferrer">scrollama.js</a><br>
  I want to do this "Basic" as it is.<br>
  It's setting up <code>nth-child(2)</code> now, but I want to change that to this.  </p>
  
  <p>In other words,<br>
  I want to<br>
  1) Highlight when it scroll over the right sentence<br>
  2) Left and right sync<br>
  3) Change <code>nth-child(2)</code> to "Basic" of scrollama  </p>
  
  <p>I made a fork that added an image and scrollama to the latest answer. Please fork this. -> <a href="https://jsfiddle.net/__R2D2/oag5qyeu/15/" rel="nofollow noreferrer">JSFiddle</a>  </p>
  
  <p>It has become longer..<br>
  Sorry, thank you by all means!  </p>
  
  <hr>
  
  <h2>Code</h2>
  
  <p><a href="https://jsfiddle.net/__R2D2/dk475qzw/10/" rel="nofollow noreferrer">JSFiddle</a><br>
  ↑ For some reason code snippets do not work well, so have a look at JSFiddle.<br>
  Fullscreen Fiddle is <a href="https://jsfiddle.net/__R2D2/dk475qzw/10/embedded/result/" rel="nofollow noreferrer">here</a>.  </p>
  
  <p>↓ Here is the code only.  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
    $(".mai").scroll(function() {
      onScroll();
    });
    onScroll();
  });
  
  function onScroll() {
    $(".main-p p").each(function(i) {
      $(".main-p p").eq(i).removeClass("hl");    // mean highlight
  
    var scrPos = $(".main-p p:nth-last-child(2)");
    // I want to be second from the bottom of the "visible range" of .mai, not of &lt;p&gt;
  
    if(scrPos &lt; active) {
      // If hl (= active) is above the second from the bottom of the range seen in .mai
  
      $('.mai').scroll(function(e) {
        e.preventDefault();
      });
    } else {
      $('.mai').scroll();
      // I want to return the scroll, but is this correct?
    }
  
    // I want to put processing to highlight with &lt;p&gt;, next &lt;p&gt;, next &lt;p&gt;..
    $('.main-p .active').addClass('hl');
  
    });
  }
  
  
  
  // Processing of left &amp; right sync with swiper
  var swiperCnt = new Swiper('.swiperCnt', {
    direction: 'vertical',
    pagination: {
      el: '.swiper-pagination',
      type: 'bullets',
      clickable: 'true',
    },
    keyboard: {
      enabled: true,
    },
    mousewheel: {
      forceToAxis: true,
      invert: true,
    },
    renderBullet: function (index, className) {
      return '&lt;span class="' + className + '"&gt;' + (index + 1) + '&lt;/span&gt;';
    },
  });
  
  var swiperP = new Swiper('.swiperP', {
    direction: 'vertical',
    keyboard: {
      enabled: true,
    },
    mousewheel: {
      forceToAxis: true,
      invert: true,
    },
  });
  
  swiperCnt.controller.control = swiperP;
  swiperP.controller.control = swiperCnt;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* The corresponding part is at the bottom too. (It is faster to count from the bottom)
  (There is a mark in the comment) */
  html {
    font-size: 62.5%;
  }
  
  body {
    font-size: 1.5rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: #c6d2dd;
    color: white;
  }
  
  .wrap {
    height: 100vh;
    display: flex;
  }
  
  .left {
    padding: 0 0 0 2.4rem;
  }
  
  .right {
    padding: 0 4.7rem 0 6.5rem;
    position: relative;
  }
  
  h2,h3,h4,h5,h6 {
    display: inline;
  }
  
  .mission,
  .m-p,
  .concept,
  .c-p,
  .what,
  .target,.t-p,.main-p,.nb,.nb-p,.period,.p-p,.category,.cg-p,.class,.cl-p,.release,.r-p,.nbb,.per,.cat,.cla,.rel {
    display: inline-block;
  }
  
  .title {
    font-size: 1.8rem;
    padding: 1.8rem 0 1.7rem 0;
  }
  
  .solid-ti {
    border-bottom: .1rem solid white;
    margin: 0 -56.3rem 0 -2.4rem;
  }
  
  .solid-mc {
    border-bottom: .1rem solid white;
    margin-left: -2.4rem;
  }
  
  .solid-tm {
    border-bottom: .1rem solid white;
    margin-right: -4.7rem;
  }
  
  .swiper-pagination {
    top: 6rem;
  }
  
  .swiper-container {
    width: 69.3rem;
    height: 49.6rem;
  }
  
  .swiper-slide {
    display: flex;
    align-items: center;
  }
  .swiper-slide img {
    width: 69.3rem;
  }
  
  .swiper-pagination-bullet {
    background: none;
    font-size: 1rem;
    margin-right: .5rem;
    opacity: .3;
  }
  .swiper-pagination-bullet::before {
    content: '0';
    font-weight: bold;
  }
  .swiper-pagination-bullet:hover::before {
    content: '1';
    font-weight: bold;
  }
  
  .swiper-pagination-bullet-active {
    background: none;
    transform: scale(1);
    transition-duration: .16s;
    opacity: .7;
  }
  .swiper-pagination-bullet-active::before {
    content: '1';
    font-weight: bold;
  }
  
  .mis {
    padding: 2.6rem 0 0.7rem 0;
  }
  
  .mission {
    padding-right: 2rem;
  }
  
  .con {
    padding-top: 0.7rem;
  }
  
  .concept {
    padding-right: 2rem;
  }
  
  .what {
    margin: 2rem 1.5rem 2.1rem 0;
    display: flex;
    align-items: center;
  }
  .what &gt; img {
    height: 2rem;
    margin-right: .3rem;
  }
  .what &gt; img:last-child {
    margin-right: 1rem;
  }
  .what span {
    font-size: 1.4rem;
    border: .1rem solid white;
    border-radius: .3rem;
    margin-right: 1rem;
    padding: .5rem .4rem .4rem;
  }
  
  .tar {
    padding: 2.2rem 0 2rem 0;
    flex-grow: 1;
  }
  
  .target {
    padding-right: 1.2rem;
  }
  
  .t-p {
    white-space: pre-wrap;
    vertical-align: top;
  }
  
  .heartbox {
    display: flex;
    align-items: center;
  }
  .heartbox div:last-child {
    user-select: none;
  }
  
  input {
    opacity: 0;
  }
  
  @keyframes rubberBand {
    from {
      transform: scale(1, 1, 1);
    }
    30% {
      transform: scale3d(1.15, 0.75, 1);
    }
    40% {
      transform: scale3d(0.75, 1.15, 1);
    }
    50% {
      transform: scale3d(1.1, 0.85, 1);
    }
    65% {
      transform: scale3d(0.95, 1.05, 1);
    }
    75% {
      transform: scale3d(1.05, 0.95, 1);
    }
    to {
      transform: scale3d(1, 1, 1);
    }
  }
  .heart {
    cursor: pointer;
    width: auto;
    height: 25px;
    fill: #E2E2E2;
  }
  
  #fav:checked + label .heart {
    fill: #e23b3b;
    animation: rubberBand 0.8s;
  }
  
  
  
  
  
  /*
   * from here
   */
  .mai {
    margin: 2.8rem 0 0 0;
    height: 37.8rem;
    overflow-y: scroll;
    overflow-x: hidden;
    -ms-overflow-style: none;
  }
  .mai::-webkit-scrollbar {
    display: none;
  }
  
  .main-p {
    white-space: pre-wrap;
    opacity: 0.3;
  }
  
  .hl {
    opacity: 1;
  }
  
  /*
   * to here
   */
  
  
  
  
  
  .▼ {
    float: right;
    margin-right: 1.5rem;
  }
  
  .under {
    text-align: right;
    position: absolute;
    right: 4.7rem;
    bottom: 2.7rem;
  }
  
  .nbb {
    padding-right: 4.8rem;
  }
  
  .nb {
    padding-right: .8rem;
  }
  
  .period {
    padding-right: 1.6rem;
  }
  
  .top {
    font-size: 1.1rem;
    padding: 2.1rem 0 2rem;
    text-align: right;
  }
  
  .cat {
    padding-right: 1.4rem;
  }
  
  .category {
    padding-right: 1.4rem;
  }
  
  .cla {
    padding-right: 1.4rem;
  }
  
  .class {
    padding-right: 1.4rem;
  }
  
  .rel {
    padding-right: 1.4rem;
  }
  
  .release {
    padding-right: 1.4rem;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.css" rel="stylesheet"/&gt;
  
  &lt;!-- The corresponding part is at the bottom. (It is faster to count from the bottom)
  (There is a mark in the comment) --&gt;
  
  &lt;body class="wrap"&gt;
  
    &lt;div class="left"&gt;
      &lt;h1 class="title"&gt;title&lt;/h1&gt;
  
      &lt;div class="solid-ti"&gt;&lt;/div&gt;
  
      &lt;div class="swiper-pagination"&gt;&lt;/div&gt;
      &lt;div class="swiper-container swiperCnt"&gt;
        &lt;section class="swiper-wrapper imgs"&gt;
          &lt;div class="swiper-slide"&gt;&lt;img class="work" src="http://placehold.jp/45/1920a6/ffffff/693x350.png?text=1" /&gt;&lt;/div&gt;
          &lt;div class="swiper-slide"&gt;&lt;img class="work" src="http://placehold.jp/45/199fa6/ffffff/693x350.png?text=2" alt="Rollse-killer" /&gt;&lt;/div&gt;
          &lt;div class="swiper-slide"&gt;&lt;img class="work" src="http://placehold.jp/45/a61972/ffffff/693x350.png?text=3" alt="Rollse-data" /&gt;&lt;/div&gt;
          &lt;div class="swiper-slide"&gt;&lt;img class="work" src="http://placehold.jp/45/a6a619/ffffff/693x350.png?text=4" alt="Rollse-image" /&gt;&lt;/div&gt;
        &lt;/section&gt;
      &lt;/div&gt;
  
      &lt;div class="mis"&gt;
        &lt;h3 class="mission"&gt;MISSION:&lt;/h3&gt;
        &lt;p class="m-p"&gt;sample sample sample sample sample sample sample sample &lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div class="solid-mc"&gt;&lt;/div&gt;
  
      &lt;div class="con"&gt;
        &lt;h2 class="concept"&gt;CONCEPT:&lt;/h2&gt;
        &lt;p class="c-p"&gt;sample sample sample &lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div class="what"&gt;
        &lt;img src="http://placehold.jp/45/d4d4d4/d4d4d4/28x20.png?text=_" alt="2nd" /&gt;&lt;img src="http://placehold.jp/45/d4d4d4/d4d4d4/20x20.png?text=_" alt="ai" /&gt;&lt;img src="http://placehold.jp/45/d4d4d4/d4d4d4/20x20.png?text=_" alt="vw" /&gt;
  
        &lt;span&gt;sample&lt;/span&gt;
        &lt;span&gt;sample&lt;/span&gt;
        &lt;span&gt;sample&lt;/span&gt;
        &lt;span&gt;sample&lt;/span&gt;
        &lt;span&gt;sample&lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="right"&gt;
      &lt;div class="top"&gt;
        &lt;div class="cat"&gt;
          &lt;h5 class="category"&gt;CATEGORY:&lt;/h5&gt;
          &lt;p class="cg-p"&gt;sample sample &lt;/p&gt;
        &lt;/div&gt;
  
        &lt;div class="cla"&gt;
          &lt;h5 class="class"&gt;CLASS:&lt;/h5&gt;
          &lt;p class="cl-p"&gt;sample &lt;/p&gt;
        &lt;/div&gt;
  
        &lt;div class="rel"&gt;
          &lt;h5 class="release"&gt;RELEASE:&lt;/h5&gt;
          &lt;p class="r-p"&gt;sample &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="heartbox"&gt;
        &lt;div class="tar"&gt;
          &lt;h3 class="target"&gt;TARGET:&lt;/h3&gt;
          &lt;p class="t-p"&gt;sample sample sample sample sample sample sample sample sample sample sample 
          &lt;/p&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;input type="checkbox" name="fav" id="fav"&gt;
          &lt;label for="fav"&gt;
              &lt;svg class="heart" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
              viewBox="0 0 37 32" style="enable-background:new 0 0 37 32;" xml:space="preserve"&gt;
              &lt;path class="st0" d="M27,0c-2.5,0-4.9,0.9-6.7,2.6C19.6,3.2,19,4,18.5,4.7C18,4,17.4,3.2,16.7,2.6C14.9,0.9,12.5,0,10,0
              C4.5,0,0,4.5,0,10c0,3.7,1.2,6.7,3.9,9.8c3.9,4.6,13.9,11.6,14.3,11.9c0.1,0.1,0.2,0.1,0.3,0.1s0.2,0,0.3-0.1
              c0.4-0.3,10.4-7.3,14.3-11.9c2.7-3.2,3.9-6.1,3.9-9.8C37,4.5,32.5,0,27,0z"/&gt;&lt;/svg&gt;
            &lt;/label&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="solid-tm"&gt;&lt;/div&gt;
  
  
  
  
  
      &lt;!--
  from here
  --&gt;
      &lt;div class="mai swiper-container swiperP"&gt;
      &lt;section class="main-p swiper-wrapper"&gt;&lt;p class="active swiper-slide"&gt;Here is the relevant part. It can scroll.&lt;/p&gt;
  
  &lt;p class="swiper-slide"&gt;sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample &lt;/p&gt;
  
  &lt;p class="swiper-slide"&gt;sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample &lt;/p&gt;
  
  &lt;p class="swiper-slide"&gt;sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample &lt;/p&gt;
  &lt;p class="swiper-slide"&gt;sample sample sample sample sample sample sample sample sample sample sample sample sample sample &lt;/p&gt;
  
  
  &lt;p class="swiper-slide"&gt;sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample &lt;/p&gt;
  
  &lt;p class="swiper-slide"&gt;sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample &lt;/p&gt;
  
  &lt;p class="swiper-slide"&gt;sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample sample &lt;/p&gt;
  &lt;p class="swiper-slide"&gt;sample sample sample sample sample sample sample &lt;/p&gt;
  &lt;/section&gt;
      &lt;/div&gt;
      &lt;!-- 
  to here
  --&gt;
  
  
  
  
  
      &lt;img src="http://placehold.jp/45/d4d4d4/d4d4d4/14x12.png?text=_" alt="▼" class="▼" width="14" /&gt;
  
      &lt;div class="under"&gt;
        &lt;div class="nbb"&gt;
          &lt;h4 class="nb"&gt;N.B.:&lt;/h4&gt;
          &lt;p class="nb-p"&gt;sample &lt;/p&gt;
        &lt;/div&gt;
  
        &lt;div class="per"&gt;
          &lt;h4 class="period"&gt;PERIOD:&lt;/h4&gt;
          &lt;p class="p-p"&gt;sample &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/js/swiper.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Could you please give me a hand?  </p>