Scrollsection Plugin stops inner scrolls

Question

DEMO

Problem: I am using ScrollSection plugin & having a problem with inner div scroll. i.e inside a section there is a div with scroll but when i hover over it to scroll the div, it scrolls the page instead.

What I have tried: I have added a global Boolean variable(named disableScrollSectionMouseWheel) inside the core file of scrollSection plugin which can pause it's functionality of mouse-wheel, Using this switch i have added an event for mouse enter and leave on div, it does stops the page scroll but does not turn on the div scroll!!.

By the way i have created a simple version of this issue in jsFiddle but later i have to integrate it with scroll-magic on this site.

CODE:

$(function() {
    disableScrollSectionMouseWheel = 0;
    scrollSectionsController = $('section.scrollsections').scrollSections({
        speed: 2000,
        touch: false,
        mousewheel: true,
        exceptions: true,
        scrollMax: 1,
        exceptions: true,
        alwaysStartWithFirstSection: true,
        scrollbar: true
    });
    /* My Script To pause on hover */
    $('section.scrollsections .title').hover(function(e) {
        if ($(this).hasScrollBar()) {
            disableScrollSectionMouseWheel = 1;
        }
    });
    $('section.scrollsections .title').mouseleave(function(e) {
        disableScrollSectionMouseWheel = 0;
    });
});
(function($) {
    $.fn.hasScrollBar = function() {
        return this.get(0).scrollHeight > this.height();
    }
})(jQuery);

Or you can simple use [`fullPage.js`](http://alvarotrigo.com/fullPage/) instead and the option `normalScrollElements`. — Alvaro, Nov 14 '14 at 16:01
Full Page JS doesn't uses browser scrolls which means i cant use it with plugins like [scrollMagic](http://janpaepke.github.io/ScrollMagic/) ~ any ways issue was resolved thanks to @Dmitry — Imran Bughio, Nov 15 '14 at 19:03
It actually does nowadays. Check out the option `scrollBar`, [there's an example](http://alvarotrigo.com/fullPage/examples/scrollBar.html) with it. — Alvaro, Nov 16 '14 at 18:26
In any case, using scrollMagic doesn't make much sense as there are callbacks in fullPage.js for it. But if you still want to use it, you can if you use `scrollBar:true`. — Alvaro, Nov 16 '14 at 18:27
@Alvaro Nice ~ I didn't knew that, i will definitely use this in my next project. Looks much more promising then [scrollSection](https://github.com/guins/jQuery.scrollSections) which is kind of a dead plugin. — Imran Bughio, Nov 17 '14 at 08:20

score 1 · Accepted Answer · edited May 23 '17 at 10:33

http://jsfiddle.net/tw7h1xkp/7/

1. Plugin stops the mousewheel event all the time, so you need to add a condition that checks your variable:

 if(disableScrollSectionMouseWheel) return;//line 455 in my fiddle

2. .title does not have the scroll but the p inside of it has. So you need to add the event handler to the p:

$('section.scrollsections .title p')

EDIT: Also you need to re-enable the plugin when user scrolls to the bottom or top of the p:

    $('section.scrollsections .title p').on('scroll', function() {
        if($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight) {
            disableScrollSectionMouseWheel = 0;
        }
        if($(this).scrollTop() == 0) {
            disableScrollSectionMouseWheel = 0;
        }
    });

based on Detecting when user scrolls to bottom of div with jQuery

Your code makes a weird flicker when you scroll on the `p` **right after** you scroll outside. When you detect a scroll on the `p` maybe you should cancel the animation? — Ismael Miguel, Oct 23 '14 at 11:47
Thanks Dmitry, There was an animation flick when scrolling top (when inside the `p`). I have updated your answer. — Imran Bughio, Oct 24 '14 at 11:09

Scrollsection Plugin stops inner scrolls

DEMO

1 Answers1