Question

我将 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()它已开始正常工作，但它不再在单个向下滚动或向上滚动时切换该部分。

非常感谢任何帮助。

Answer 1

将您的JS更改为：

Demo Fiddle

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

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

您通过指示两个不同的元素来提供插件冲突的信息。您正在有效地将它应用于body，然后单独检测儿童鼠标滚轮的滚动事件。

使用自定义滚动条滚动部分（Nice Scroll） - 快速滚动时的动画抖动

1 个答案:

Demo Fiddle