Javascript 使用自定义滚动条滚动部分(漂亮的滚动)--快速滚动时的动画抖动

Javascript 使用自定义滚动条滚动部分(漂亮的滚动)--快速滚动时的动画抖动,javascript,jquery,css,scroll,nicescroll,Javascript,Jquery,Css,Scroll,Nicescroll,我将与一起使用 一切都很好,但如果我快速滚动,它就会开始产生这些动画抖动 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-t

我将一起使用

一切都很好,但如果我快速滚动,它就会开始产生这些动画抖动

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>
html, body{
    height:!00%;
}
.root_section{
    height: 100%;
    position: relative;
}
.mid-inner-test-1{
    position: absolute;
    top: 100px;
    left: 100px;
}
$('section.root_section').scrollSections({
    mousewheel: true,
});

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

    <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>
html, body{
    height:!00%;
}
.root_section{
    height: 100%;
    position: relative;
}
.mid-inner-test-1{
    position: absolute;
    top: 100px;
    left: 100px;
}
$('section.root_section').scrollSections({
    mousewheel: true,
});

$("body").niceScroll({
    easing: 'easeOutCircle'
});
我尝试过的:

    <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>
html, body{
    height:!00%;
}
.root_section{
    height: 100%;
    position: relative;
}
.mid-inner-test-1{
    position: absolute;
    top: 100px;
    left: 100px;
}
$('section.root_section').scrollSections({
    mousewheel: true,
});

$("body").niceScroll({
    easing: 'easeOutCircle'
});
如果我在
scrollSection()
函数上取消清除
mouseweel:false
,它将开始正常工作,但不再在单个向下滚动或向上滚动时切换部分

任何帮助都将不胜感激。

将您的JS更改为:


通过指示两个不同的元素,您为插件提供了相互冲突的信息。您正在有效地将其应用于您的
主体
,但随后分别检测到一个孩子身上鼠标滚轮的滚动事件。

它似乎只粘在主体标签上,例如,尝试停止滚动条b/w第2和第3部分,它不会去任何地方。。。它应该做的是滚动到第二个或第三个--第一个nearest@ImranBughio-不完全清楚您期望的行为检查此项-我已达到此状态,但自定义滚动条会导致动画问题。