Scrollify jQuery插件破坏了Bootstrap Scrollspy

时间:2018-01-30 15:39:02

标签: jquery bootstrap-4 scrollspy jquery-scrollify

My Bootstrap Scrollspy工作正常,直到我添加了JQuery脚本Scrollify。我不得不将jQuery脚本从slim.min.js更改为min.js版本,但我不认为这是问题所在。

           <div class="col-md-2 offset-md-2 d-block d-sm-none">
                <!--ScrollSpy nested navbar for mobile only-->
                <nav id="spynav-mobile" class="nav navbar-light bg-light">
                    <ul class="nav nav-pills">
                    <li class="nav-item">
                        <a class="nav-link" href="#item-1-">Me</a>
                    </li>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#item-2-">Tech Challenge</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#item-3-">BBC Sport</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#item-4-">Student Mentor</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#item-5-">MTA Cert</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#item-6-">TeaFresh</a>
                    </li>
                </ul>
            </div>

导航

                <div class="col-md-6 d-block d-sm-none">
                <!--ScrollSpy text for mobile-->
                <div id="scroll" data-spy="scroll" data-target="#spynav-mobile" data-offset="0">
                    <h4 id="item-1-">Me</h4>
                    <p>.....</p>
                </div>
            </div>

文字

文本div的样式为:{height: 80vh;, overflow y: scroll;}

导航的样式为:{height: 20vh;}

除了添加JQuery插件并将JQuery脚本从slim更改为min之外,我无法想到我所做的任何改变。在我说之前它完美地运作了。

1 个答案:

答案 0 :(得分:0)

我明白了。希望这可以在将来帮助某人。

standardScrollElements 一个CSS选择器,用于需要标准滚动行为的部分中的元素。例如 standardScrollElements:“。map,。frame”。

来自作者GitHub页面https://github.com/lukehaas/Scrollify