Bootstrap scrollspy 在 Blazor 中不工作

Question

我在 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

当我在本地主机上的项目中尝试它时，有时单击 'clear cache and force reload' 时它可以工作，第二次单击 'clear cache and force reload' 它不再起作用。

我 can/need 是否需要执行一些额外的步骤才能使其在 Blazor 中运行？

Answer 1

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

因为执行的javascript是

$(window).on(EVENT_LOAD_DATA_API, 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

中调用这个函数

Bootstrap scrollspy 在 Blazor 中不工作

Bootstrap scrollspy not working in Blazor

scrollspy

bootstrap-4

blazor

blazor-server-side