0

デモ

Scroll SectionをNice Scrollで使用しています。

すべて問題ありませんが、非常に速くスクロールすると、これらのアニメーションのジャークが発生し始めます。

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'
});

私が試したこと：

関数で宣言mousewheel: falseすると、scrollSection()正常に動作し始めますが、シングルスクロールダウンまたはスクロールアップでセクションを切り替えることはなくなりました。

どんな助けでも大歓迎です。

4

1 に答える 1

0

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.

于 2014-05-15T10:53:50.110 に答える