Scroll Sections with Custom Scrollbar (Nice Scroll) -- Animation jerks on fast Scrolling

DEMO

I am using Scroll Section with Nice Scroll.

Every thing is fine but if i scroll really quickly it start producing these animation jerks.

HTML:

    <section id="top" class="root_section">
        This is a section 1
    </section>

    <section id="mid" class="root_section">
        This is a section 2
        <section id="mid-test-1" class="mid-inner-test-1 root_section"> Mid section </section>
    </section>

    <section id="bot" class="root_section">
        This is a section 3
    </section>

CSS:

html, body{
    height:!00%;
}
.root_section{
    height: 100%;
    position: relative;
}
.mid-inner-test-1{
    position: absolute;
    top: 100px;
    left: 100px;
}

JS:

$('section.root_section').scrollSections({
    mousewheel: true,
});

$("body").niceScroll({
    easing: 'easeOutCircle'
});

What i have tried:

If i declear mousewheel: false on scrollSection() function it starts working fine but it no longer switches the section on single scroll down or scroll up.

Any help will be much appreciated.

Change your JS to:

Demo Fiddle

$('body').scrollSections({
    mousewheel: true,
});

$("body").niceScroll({
    easing: 'easeOutCircle'
});

You are giving the plugin conflicting information, by instructing two different elements. You are effectively applying it to your body but then detecting the scroll event for mouse wheel on a child seperately.