Nested scroll inside vertical swiper slide when mousewheel: true

Question

I have a vertical slider and I'm using swiper to navigate through the slides.

Every swiper-slide container height is 100vh.

I have a slide which content is greater than the view height and when scrolling with the mousewheel, I want to first scroll it's content and when the end or top is reached, according to the scroll direction, move to the next or previous slide.

I went through swiper documentation, SO and other pages but didn't find a solution.

Here is the jsfiddle: https://jsfiddle.net/gentian28/6wdsep1v/13/

HTML

<div class="swiper-container">
    <main class="main swiper-wrapper">

        <!-- landing -->
        <section id="home" class="swiper-slide">
            <div id="particles-js"></div>
            <div id="typeIt" class="d-flex align-center"></div>
        </section>

        <!-- about -->
        <section id="about" class="swiper-slide">
            <span class="animation">About</span>
        </section>

        <!-- portfolio -->
        <section id="portfolio" class="swiper-slide d-flex flex-wrap col-3">
            <div class="card">
                card 1
            </div>
            <div class="card">
                card 2
            </div>
            <div class="card">
                card 3
            </div>
            <div class="card">
                card 4
            </div>
            <div class="card">
                card 1
            </div>
            <div class="card">
                card 1
            </div>
            <div class="card">
                card 1
            </div>
            <div class="card">
                card 1
            </div>
            <div class="card">
                card 1
            </div>
            <div class="card">
                card 1
            </div>
            <div class="card">
                card 1
            </div>
        </section>

        <!-- technologies -->
        <section id="skills" class="swiper-slide">
            Skills
        </section>

        <!-- contact -->
        <section id="contact" class="swiper-slide">
            Contact
        </section>

    </main>

</div>

CSS

body {
    margin: 0;
    padding: 0;
}
.d-flex {
    display: flex;
}
.align-center {
    align-items: center;
}
.justify-center {
    justify-content: center;
}
.justify-between {
    justify-content: space-between;
}
.flex-column {
    flex-flow: column;
}
.column-reverse {
    flex-flow: column-reverse;
}
.flex-wrap {
    flex-wrap: wrap;
}
.col-2 > * {
    width: calc(100% / 2 - 7.5px);
    margin-right: 15px;
    margin-bottom: 15px;
}
.col-2 > *:nth-child(2n) {
    margin-right: 0;
}

.col-3 > * {
    width: calc(100% / 3 - 10px);
    margin-right: 15px;
}

.col-3 > *:nth-child(3n) {
    margin-right: 0;
}

.col-4 > * {
    width: calc(100% / 4 - 10.5px);
    margin-right: 14px;
}

.col-4 > *:nth-child(4n) {
    margin-right: 0;
}
.card {
    height: 300px;
}

.swiper-container {
    width: 100% - 120px;
    height: 100vh;
    margin-left: auto;
    margin-right: auto;
}
.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;
    overflow-y: auto;
}
.swiper-pagination {
    display: flex;
    flex-flow: column;
}
.swiper-pagination-bullet-active {
    opacity: 0;
}
.swiper-pagination-bullet {
    width: 120px;
    height: 96px;
    border-radius: 0;
    opacity: 0;
}

JS

const swiperConf = {
    direction: 'vertical',
    slidesPerView: 1,
    spaceBetween: -1,
    mousewheel: true,
    keyboard: true,
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    }
}

var swiper = new Swiper('.swiper-container', swiperConf);

Answer 1

Also ran into this issue, and the fiddle from @Daryll was very helpful, but with typescript there were some issues getting the 'swiperSlideSize' from an HTMLElement (also using reactjs there are some differences). This worked for me as the event handler for 'onSlideChangeTransitionEnd':

  const allowScroll = (swiper: SwiperEvent) => {
    var activeIndex = swiper.activeIndex;
    var activeSlide = swiper.slides[activeIndex];
    var { scrollHeight, clientHeight } = activeSlide;
    const diff = scrollHeight - clientHeight;
    if (diff > 0) {
      const findScroll = (e) => {
        const scrollUp = e.deltaY < 0;
        if (scrollUp && activeSlide.scrollTop === 0) {
          swiper.mousewheel.enable();
          activeSlide.removeEventListener("wheel", findScroll);
        } else if (!scrollUp && activeSlide.scrollTop === diff) {
          swiper.mousewheel.enable();
          activeSlide.scrollTop = 0;
          activeSlide.removeEventListener("wheel", findScroll);
        }
      };
      activeSlide.addEventListener("wheel", findScroll);
      swiper.mousewheel.disable();
    }
  };

edit: the "SwiperEvent" type is an alias I'm using with import { Swiper as SwiperEvent } from "swiper"; to avoid namespace conflict with import { Swiper } from "swiper/react";

edit 2: for mobile usage, you have to consider 'touchmove' events, which don't (always?) register the 'wheel' event. By disabling 'allowTouchMove' on the swiper, you achieve the same effect on mobile as with mousewheel.disable() on desktop. Here's some code for that case:

  const allowScroll = (swiper: SwiperEvent) => {
    var activeIndex = swiper.activeIndex;
    var activeSlide = swiper.slides[activeIndex];
    var { scrollHeight, clientHeight } = activeSlide;
    const diff = scrollHeight - clientHeight;
    if (activeSlide.scrollTop === 0) activeSlide.scrollTop = 1;
    else if (activeSlide.scrollTop === diff) activeSlide.scrollTop = diff - 1;
    if (diff > 0) {
      const findScroll = (e) => {
        const scrollUp = e.deltaY < 0;
        if (
          (scrollUp || e.type === "touchmove") &&
          activeSlide.scrollTop <= 0
        ) {
          swiper.mousewheel.enable();
          swiper.allowTouchMove = true;
          activeSlide.removeEventListener("wheel", findScroll);
          activeSlide.removeEventListener("touchmove", findScroll);
        } else if (
          (!scrollUp || e.type === "touchmove") &&
          activeSlide.scrollTop >= diff
        ) {
          swiper.mousewheel.enable();
          swiper.allowTouchMove = true;
          activeSlide.removeEventListener("wheel", findScroll);
          activeSlide.removeEventListener("touchmove", findScroll);
        }
      };
      activeSlide.addEventListener("wheel", findScroll);
      activeSlide.addEventListener("touchmove", findScroll);
      swiper.mousewheel.disable();
      swiper.allowTouchMove = false;
    }
  };

Basically, by setting the scrollTop to 1px from either the top or bottom of the range, you prevent the mousewheel.enable() call from triggering immediately. In the original version, the slide would always start at the top of the scroll height when activated, while this version starts at the "top" (technically 1px down) if you're swiping down to it and the "bottom" if you're swiping up to it.