Bootstrap 4 scrollspy不包括id

Question

我有一个接一个的部分，在它们的中间我没有锚导向它。问题是，在上一节中，scrollspy处于活动状态。我想让scrolllspy在该点没有显示任何活动，并在下一个带有效锚点的部分出现时恢复。我正在尝试Exclude ID in Twitter Bootstrap Scrollspy的解决方案，但它们似乎无法在bootstrap 4中工作，我甚至无法捕获触发器，假设通过以下方式工作：

$('#nav-links').on('activate.bs.scrollspy', function () { 
// or $('#nav-links li').on('activate.bs.scrollspy', function () {
// or $('#nav-links li').on('activate',  function(){
    alert('sdsd'); // no alert, but scrollspy is working
})

如果只有当导航链接的id与滚动元素的id匹配时，如何使scrollspy工作，不包括其他元素？

a）（部分帮助）如何捕捉scrollspy射击事件？

Answer 1

这可能看起来有点hackish，但我认为这是实现你想要的行为而不修改scrollspy javascript本身的唯一方法。

这里的想法是为旁边元素创建锚点，但隐藏这些锚点。由于菜单项的顺序对于scrollspy并不重要，因此可以将这些“不必要的”菜单项分组并包装到单个隐藏的父元素中。检查下面的代码段。

#content {
    position: relative;
    overflow-y: scroll;
    height: 100vh;
}

/* Just basic styling */
#content > div {
    height: 50vh;
    padding: 15px;
}
#content > div:nth-child(2n) {
    background-color: lightgrey;
}
#content > div:last-child {
    height: 100vh;
}
.aside {
    background-color: pink !important;
}

<div class="container-fluid">
    <div class="row">
        <div class="col-3">
            <nav id="navbar-scollspy" class="navbar navbar-light bg-light flex-column">
                <a class="navbar-brand" href="#">Navbar</a>

                <nav class="nav nav-pills flex-column">
                    <a class="nav-link" href="#section-1">Section 1</a>
                    <a class="nav-link" href="#section-2">Section 2</a>
                    <a class="nav-link" href="#section-3">Section 3</a>
                    <a class="nav-link" href="#section-4">Section 4</a>

                    <!-- Hidden menu items for asides -->
                    <div class="d-none">
                        <a class="nav-link" href="#aside-1">Aside 1</a>
                        <a class="nav-link" href="#aside-2">Aside 2</a>
                    </div>
                </nav>
            </nav>
        </div>

        <div id="content" class="col-9" data-spy="scroll" data-target="#navbar-scollspy">
            <div id="section-1">
                <h4>Section 1</h4>
                <p>...</p>
            </div>
            
            <div id="aside-1" class="aside">
                <h4>Aside 1</h4>
                <p>...</p>
            </div>
            
            <div id="section-2">
                <h4>Section 2</h4>
                <p>...</p>
            </div>
            
            <div id="aside-2" class="aside">
                <h4>Aside 2</h4>
                <p>...</p>
            </div>

            <div id="section-3">
                <h4>Section 3</h4>
                <p>...</p>
            </div>

            <div id="section-4">
                <h4>Section 4</h4>
                <p>...</p>
            </div>
        </div>
    </div>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

顺便说一下，你可以在spied元素（activate.bs.scrollspy）或任何父元素上监听[data-spy="scroll"]事件，包括$（'body'）和$（document），如下所示：

$('[data-spy="scroll"]').on('activate.bs.scrollspy', function(event) {
    console.log('activate.bs.scrollspy', event);
})