Блог

Главная - Вопросы по программированию - Как решить проблему Scroll spy refresh Bootstrap 5?

Как решить проблему Scroll spy refresh Bootstrap 5?

#twitter-bootstrap #scrollspy

#twitter-bootstrap #scrollspy

Вопрос:

Я обнаружил небольшую проблему в scrollspy Bootstrap 5. Когда Windows изменяет размер, навигация не корректна и не обновляется.

Исходный код взят из оригинального bootstrap 5

https://v5.getbootstrap.com/docs/5.0/components/scrollspy/#refresh

Неперехваченная ошибка типа: не удается прочитать свойство ‘refresh’ null

ДЕМОНСТРАЦИЯ :

 var dataSpyList = [].slice.call(document.querySelectorAll('[data-spy="scroll"]'))
dataSpyList.forEach(function (dataSpyEl) {
  bootstrap.ScrollSpy.getInstance(dataSpyEl)
    .refresh()
})  
 html {
  scroll-behavior: smooth;
}

/*margin padding*/

.py-9 {
  padding-top: 7rem;
  padding-bottom: 7rem;
}
.my-9 {
  margin-top: 7rem;
  margin-bottom: 7rem;
}
body {
  font-family: system-ui;
  background: #f06d06;
  color: white;
  text-align: center;
}
.py-9 {
  padding-top: 7rem;
  padding-bottom: 7rem;
}  
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/css/bootstrap.min.css" integrity="sha384-DhY6onE6f3zzKbjUPRc2hOzGAdEf4/Dz WJwBvEYL/lkkIsI3ihufq9hk9K4lVoK" crossorigin="anonymous">
<body id="page-top" data-spy="scroll" data-target="#main-nav" data-offset="92">

    <!-- ========== { HEADER }==========  -->
    <header id="main-nav" class="fixed-top nav-dark bg-light border-bottom  py-3">
      <div class="container">
        <!-- Navbar -->
        <nav class="js-navbar-scroll navbar navbar-expand-lg navbar-light">
          <a class="navbar-brand main-logo" href="#">
            MY LOGO
          </a>

          <!-- navbar button -->
          <button class="navbar-toggler" type="button"
            data-toggle="collapse"
            data-target="#navbarTogglerDemo"
            aria-controls="navbarTogglerDemo"
            aria-expanded="false"
            aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

          <!-- collapse menu -->
          <div class="collapse navbar-collapse" id="navbarTogglerDemo">
            <ul class="navbar-nav nav-hover1 ml-auto mt-2 mt-lg-0">
              <li class="nav-item">
                <a class="nav-link js-scroll-trigger" href="#hero">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link js-scroll-trigger" href="#one">About</a>
              </li>
              <li class="nav-item">
                <a class="nav-link js-scroll-trigger" href="#two">Skill</a>
              </li>

              <li class="nav-item">
                <a class="nav-link js-scroll-trigger" href="#three">Progress</a>
              </li>

               <li class="nav-item">
                <a class="nav-link js-scroll-trigger" href="#four">Statistic</a>
              </li>

            </ul>
            <div class="text-center my-3 my-lg-0 ml-0 ml-lg-2">
              <a class="nav-link btn btn-primary btn-sm btn-block js-scroll-trigger" href="#five">Download
              </a>
            </div>
          </div><!-- end collapse menu -->
        </nav><!-- End Navbar -->
      </div>
    </header><!-- end header -->

    <!-- =========={ MAIN }==========  -->
    <main id="content" role="main">
      <!-- section -->
      <section id="hero" class="section position-relative bg-light py-9 border-bottom"
      >
        <h3 class="text-center my-9 py-9">SECTION HERO</h3>
      </section>

      <!-- section -->
      <section id="one" class="section position-relative bg-light py-9 border-bottom"
      >
        <h3 class="text-center my-9 py-9">SECTION ONE</h3>
      </section>

      <!-- section -->
      <section id="two" class="section position-relative bg-light py-9 border-bottom"
      >
        <h3 class="text-center my-9 py-9">SECTION TWO</h3>
      </section>

      <!-- section -->
      <section id="three" class="section position-relative bg-light py-9 border-bottom"
      >
        <h3 class="text-center my-9 py-9">SECTION THREE</h3>
      </section>

      <!-- section -->
      <section id="four" class="section position-relative bg-light py-9 border-bottom"
      >
        <h3 class="text-center my-9 py-9">SECTION FOUR</h3>
      </section>

      <!-- section -->
      <section id="last" class="section position-relative bg-light py-9 border-bottom"
      >
        <h3 class="text-center my-9 py-9">SECTION LAST</h3>
      </section>
    </main>
    <!-- end main -->

    <!-- =========={ FOOTER }==========  -->
    <footer class="py-5 bg-dark">
      <p class="text-light text-center">Copyright 2020</p>
    </footer>
    <!-- End Footer -->

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha2/js/bootstrap.bundle.min.js" integrity="sha384-BOsAfwzjNJHrJ8cZidOg56tcQWfp6y72vEJ8xQ9w6Quywb24iOsW913URv1IS4GD" crossorigin="anonymous"></script>
  </body>

Есть решение этой проблемы?

Ответ №1:

Я только что обновился с альфа-версии до beta1, и, похоже, эта конкретная проблема устранена (обязательно обновите оба компонента css и js). Не уверен, что это решит ее для вас. Я не вносил отдельных изменений, я внес несколько, прежде чем увидел, что он начал работать, но если бы мне пришлось догадаться, это было бы тем, что исправило это.

Тем не менее, scroll spy Bootstrap 5 в настоящее время сильно прослушивается вплоть до последней версии (beta1).

[немного не связано]

Я на самом деле понял это после нескольких дней борьбы с проблемой, когда scrollspy вычисляет ошибочные смещения для подсмотренных элементов после перезагрузки страницы при прокрутке в любое место, отличное от 0. github scollspy проблема с перезагрузкой страницы.