Question

我使用的是Bootstrap v4.0.0

我已经包含了必要的JavaScript文件（jQuery，popper和Bootstrap）以及必要的CSS文件。

这是HTML：

<body data-spy="scroll" data-target="#my-navbar-collapse" data-offset="100">
    <!-- ... -->
    <div class="collapse navbar-collapse" id="my-navbar-collapse">
        <ul class="nav navbar-nav" role="tablist">
            <li class="nav-item">
                <a class="nav-link" href="#one">One</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#two">Two</a>
            </li>
        </ul>
    </div>
    <!-- ... -->
    <section id="one">
        Content.
    </section>
    <!-- ... -->
    <section id="two">
        More content.
    </section>
    <!-- ... -->
    <script>
        $(function() {
            // As per the official docs: 
            // https://getbootstrap.com/docs/4.0/components/scrollspy/#events
            $('[data-spy="scroll"]').on('activate.bs.scrollspy', function() {
                console.log("This event is not firing...");
            });
        });
    </script>
</body>

滚动时菜单项会正确突出显示，但JavaScript事件activate.bs.scrollspy未触发。

我还尝试将事件挂钩到navbar本身，但它也不会触发：

$('#my-navbar-collapse').on('activate.bs.scrollspy', function () {
    console.log("Not firing either...");
})

我以前在Bootstrap 3上使用这个代码并且运行得很好。

有什么想法吗？

谢谢。

Answer 1

出于某种原因explained here，当您使用body作为间谍元素时，会在window上激活该事件。

        $(window).on('activate.bs.scrollspy', function () {
            console.log("This event is not firing...");
        });

演示：https://www.codeply.com/go/aN4tfy0zU0

修改

目标元素可以在第二个事件参数中获得：

$(window).on('activate.bs.scrollspy', function (e,obj) { console.log(obj.relatedTarget); });

Answer 2

@kim给出了正确的答案，但我还需要挂钩到一个滚动结束事件，该事件似乎不存在-因此使用超时创建了一些简单的方法：

// reset scroll watcher ##
clearTimeout( jQuery.data(this, 'scrollTimer'));

jQuery(window).on('activate.bs.scrollspy', function ( e,obj ) {
        
    // console.log(obj.relatedTarget);
        
    jQuery.data( this, 'scrollTimer', setTimeout(function() {
            
        // console.log("Didn't scroll in 1/4 sec..");

        // no scroll items are marked as active ##
        if ( ! jQuery(".scrollspy-item.active")[0]){ 

            // console.log("Can't fund any active scrollspy items..");

            // add class to parent again ##
            jQuery(".list-group-item.current").addClass( 'active' );

        }

    }, 250 ) );

});

在这种情况下，我要检查是否有任何“ scrollspy-items”标记为活动的，然后将活动类添加到父项，因为我们在侧边栏菜单中就地使用了scrollspy。

Bootstrap 4 activate.bs.scrollspy事件未触发

2 个答案: