CODEWITHSUNDEEP
javascriptswiper.jsidangero
Oleg Burakov
Oleg Burakov

Reputation: 55

Horizontal mousewheel slider with overflowed content and inner scrollbar

I'm making fullscreen slider using Swiper, where slide change controlled via mouse wheel. But in some slides, I have overflowed content. And when I try to scroll this content - the slide change to the next.

Is it possible to scroll to next slide only when I scrolled to the end of the slide content? Here is a demo https://codepen.io/olegburakov/pen/EdqeLW, I want to scroll to the bottom of the first slide via mouse wheel.

//js
var swiperOptions = {
  loop: false,
  speed: 1000,
  grabCursor: false,
  mousewheel: true,
};

var swiper = new Swiper(".swiper-container", swiperOptions);

//css
.swiper-slide {
  overflow: auto;
}

Upvotes: 0

Views: 10250

Answers (3)

shivani gupta
shivani gupta

Reputation: 11

You should add direction={"horizontal"} in swiper.

Upvotes: 1

Oleg Burakov
Oleg Burakov

Reputation: 55

Found a solution. It suits to scrollable blocks that has size smaller than slide size. Because if it has equal size(or almost equal) it will be hard to change slide via mouse wheel, because scrollable block will catch mouse wheel event. The idea is simple: just stopPropagation of the event in scrollable block.

document.querySelector('.scrollable-content').addEventListener('mousewheel', function(e){
    e.stopPropagation();
  });

Demo: https://codepen.io/olegburakov/pen/vVoPBE

Even I found a solution to check if scroll ended, there is no demo, but here is a code:

  const scrollableBlock = document.querySelector('.scrollable-block');
     if ('onwheel' in document) {
        // IE9+, FF17+, Ch31+
        scrollableBlock.addEventListener('wheel', scrollOverflowBlock);
      } else if ('onmousewheel' in document) {
        // for old
        scrollableBlock.addEventListener('mousewheel', scrollOverflowBlock);
      }

  function scrollOverflowBlock(e) {
    const delta = e.deltaY || e.wheelDelta;

    //Scroll up
    if (delta < 0) {
      if (e.target.scrollTop !== 0) {
        e.stopPropagation();
        console.log('Slider scroll stopped (top)');
      }
    }
    //Scroll down
    else {
      //http://qnimate.com/detecting-end-of-scrolling-in-html-element/
      if (e.target.offsetHeight + e.target.scrollTop !== e.target.scrollHeight) {
        e.stopPropagation();
        console.log('Slider scroll stopped (bottom)');
      }
    }
  }

Maybe it will be helpful someone, or maybe someone propose better solution.

Upvotes: 2

pixelbandito
pixelbandito

Reputation: 555

Here's a partial solution, maybe it will help. Try adding this to your Swiper config

  mousewheel: {
      forceToAxis: true,
  }

It stops swiper from doing horizontal scrolling when the user scrolls vertically with trackpad or mouse wheel, which has the effect of restoring default behavior to the vertical scrolling. It works in the Codepen.

The downside is it doesn't matter if the user has scrolled to the bottom of the content or not.

If you can change a Swiper instance's configuration without re-initializing it, you might be able to add your own event handling to turn forceToAxis on/off based on whether the user has scrolled to the bottom of the current slide's content.

On a side note: it looks like Swiper is designed only with presentations / slideshows in mind. It doesn't look like they've thought about internal scrolling, in which case it might not be the right library for the job.

Upvotes: 0

Related Questions