Bootstrap scrollspy在Blazor中不起作用

问题描述

我在Blazor项目中工作，我想添加Bootstrap的scrollspy。

我的_Host.cshtml文件中有此文件：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
    
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

我有此页面：

<div class="mt-5 ml-3 mr-1">
  <div>
    <h3 class="d-inline">name</h3><h3 class="d-inline">></h3> <h3 class="d-inline">Change profile</h3>
  </div>

  <div class="row">
    <div class="col-4">
      <div id="list-example" class="list-group">
        <a class="list-group-item list-group-item-action" href="#list-item-1">Credentials</a>
        <a class="list-group-item list-group-item-action" href="#list-item-2">Office</a>
        <a class="list-group-item list-group-item-action" href="#list-item-3">Home</a>
        <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
      </div>
    </div>
    <div class="col-8">
      <div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example" style="position:relative;height: 200px;overflow-y: scroll;">
        <h4 id="list-item-1">Credentials</h4>
        <p>...</p>
        <h4 id="list-item-2">Office</h4>
        <p>...</p>
        <h4 id="list-item-3">Home</h4>
        <p>...</p>
        <h4 id="list-item-4">Item 4</h4>
        <p>...</p>
      </div>
    </div>
  </div>
</div>

当我将其粘贴到JSfiddle中时，它正在工作：https://jsfiddle.net/6p4r8obj/

当我将其粘贴到Blazorfiddle中时，它不起作用：https://blazorfiddle.com/s/li502n7x

当我在本地主机上的项目中尝试使用它时，单击“清除缓存并强制重新加载”有时会起作用，而第二次单击“清除缓存并强制重新加载”时，它将不再起作用。

我是否可以/需要做一些额外的步骤才能使其在Blazor中工作？

解决方法

您的问题是脚本在创建页面之前尝试执行，请参见：this SO。

因为执行的javascript是

$(window).on(EVENT_LOAD_DATA_API$2,function () {
    var scrollSpys = [].slice.call(document.querySelectorAll(SELECTOR_DATA_SPY));
    var scrollSpysLength = scrollSpys.length;

    for (var i = scrollSpysLength; i--;) {
      var $spy = $(scrollSpys[i]);

      ScrollSpy._jQueryInterface.call($spy,$spy.data());
    }
  });

您可以尝试（我不知道是否可以工作）编写您的.js

已更新，感谢Kim Went，将ScrollSpy._jQueryInterface.call($spy,$spy.data());替换为$.fn['scrollspy'].call($spy,$spy.data());

checkScrollSpy=function(){
    var scrollSpys = [].slice.call(document.querySelectorAll(SELECTOR_DATA_SPY));
    var scrollSpysLength = scrollSpys.length;

    for (var i = scrollSpysLength; i--;) {
      var $spy = $(scrollSpys[i]);

      $.fn['scrollspy'].call($spy,$spy.data());
    }
}

然后在OnAfterRenderAsync

中调用此函数

blazor blazor-server-side bootstrap-4