Question

我创建了一个带有bootstrap js框架的页面，但是当我们使用向下滚动并向上滚动时，页面滚动非常慢。

我无法找到任何解决方案，如果有任何身体可以告诉我怎样才能滚动此页面顺利且非常有效

这里是代码剪切

<body>
    <div id="custom-navbar" class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-brand">
                <img src="imgs/logo.png">
            </div>
            <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
            </button>
            <div class="collapse navbar-collapse navHeaderCollapse">
                <ul class="custom-navbar-ul">
                    <li class="hoverY"><a href="#">HOME</a></li>
                    <li class="hoverY"><a href="#">BENEFITS</a></li>
                    <li class="hoverY"><a href="#">APPSBRITE<br>
                        WIDGET</a></li>
                    <li class="hoverY"><a href="#">PLACEMENT<br>
                        GUIDE</a></li>
                    <li class="hoverY"><a href="#">BLOG</a></li>
                    <li class="hoverY"><a href="#">ABOUT</a></li>
                    <li class="hoverN">
                        <button type="button" id="sign-up" class="btn btn-sm">
                            <a href="#">SIGN UP</a></button></li>
                    <li class="hoverN">
                        <button type="button" id="sign-in" class="btn btn-sm">
                            <a href="#">SIGN IN</a></button></li>
                </ul>
            </div>
        </div>
    </div>
    <div id="main">
        <div id="home-1" class="section" data-index="1" style="position: absolute; top: 0%;">
        </div>
        <div id="home-2" class="section" data-index="2" style="position: absolute; top: 100%;">
        </div>
        <div id="home-3" class="section" data-index="3" style="position: absolute; top: 200%;">
        </div>
        <div id="home-4" class="section" data-index="4" style="position: absolute; top: 300%;">
        </div>
        <div id="home-5" class="section" data-index="5" style="position: absolute; top: 400%;">
        </div>
        <div id="home-6" class="section" data-index="6" style="position: absolute; top: 500%;">
            <div id="footer">
                <div id="copyright">
                </div>
            </div>
        </div>
    </div>
</body>

有关页面示例，请参阅http://jainert.5gbfree.com/

你会找到样本页面

Answer 1

这与Bootstrap无关。

阅读脚本的文档。使用没有阅读文档的脚本是不明智的。

https://github.com/alvarotrigo/fullPage.js/

$(document).ready(function(){
    $('#main').fullpage({
        scrollOverflow: false,
        easing: 'easeInOutExpo',
        autoScrolling: true,
        scrollingSpeed: 1200, /* change this value to control the speed*/
        slidesNavigation: true
});

bootstrap视差平滑滚动问题

1 个答案: