Bootstrap 4 scrollspy 不包括 id

Question

我有一个接一个的部分，在它们中间我有一个没有锚的地方。问题是，scrollspy 在上一节中处于活动状态。我想让 scrollspy 在那一点上不显示任何活动，并在下一个带有有效锚点的部分出现时恢复。我正在尝试来自Exclude ID in Twitter Bootstrap Scrollspy 的解决方案，但它们似乎在引导程序 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)（部分帮助）如何捕获滚动间谍触发事件？

Answer 1

这可能看起来有点老套，但我认为这是在不修改 scrollspy javascript 本身的情况下实现所需行为的唯一方法。

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

#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>

顺便说一句，您可以在被监视的元素 ([data-spy="scroll"]) 或任何父元素上监听 activate.bs.scrollspy 事件，包括像这样的 $('body') 和 $(document)：

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