Bootstrap scrollspy not working in Blazor

I am working in a Blazor project and I wanted to add Bootstrap's scrollspy.

I have this in my _Host.cshtml file:

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

I have this page:

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

When I paste this in JSFiddle, it is working: https://jsfiddle.net/6p4r8obj/

When I paste this in BlazorFiddle, it is not working: https://blazorfiddle.com/s/li502n7x

When I try it in my project on localhost, it is sometimes working when I click on 'clear cache and force reload', the second time I click on 'clear cache and force reload' it no longer works.

Are there some extra steps I can/need to do to get it to work in Blazor?

Your problem is that the script try execute before the page is created, see: this SO.

As the javascript executed is

$(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());
    }
  });

You can try (I don't know if work) write your .js

Updated thanks to Kim Went, replace ScrollSpy._jQueryInterface.call($spy, $spy.data()); to $.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());
    }
}

And call this function in OnAfterRenderAsync