• Bootstrap

Почему не работают якорные ссылки в Bootstrap Offcanvas?

barbater
barbater
18
1

Привет!

Прикрутил к сайту Offcanvas из библиотеки Bootstrap 5.

Изменил ширину элемениу .offcanvas-end с дефолтных 400px на 220px.

В меню есть якорные ссылки к якорям на этой же странице.

На десктопе изменил разрешение через DevTools. Проверил на Apple, Mozila (Android) – всё работает шикарно.

В Chrome и Opera на Android ширина .offcanvas-end игнорируется и остается дефолтной.

Кроме того ссылки из меню не скроллят к якорям, а прыгают на 20-30px вниз.

P.S. Заметил, что если долго тыкать по кнопкам меню, то в какой-то момент скролл нормально срабатывает (но не всегда).

Ответы: 1

Александр Мальцев
Александр Мальцев
17.05.2023, 12:45

Привет!

Кнопка, с помощью которой вызывается Offcanvas, не должна использовать data-bs-toggle="offcanvas". Если вы сделаете открытие Offcanvas с помощью JavaScript, то всё будет работать хорошо (открыть пример).

HTML:

<button class="btn btn-primary btn-offcanvas-open" type="button">Открыть</button>

<div class="offcanvas offcanvas-end" index="-1" id="offcanvas-end">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">Offcanvas</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <ul class="nav flex-column">
      <li class="nav-item">
        <a class="nav-link" href="#header-1" data-bs-dismiss="offcanvas" data-bs-target="offcanvas-end">Header 1</a>
      </li>
      <!-- ... -->
    </ul>
  </div>
</div>

<h2 id="header-1">Header 1</h2>
<!-- ... -->

JavaScript:

const offcanvasEnd = document.querySelector("#offcanvas-end");
  const bsOffcanvas = new bootstrap.Offcanvas(offcanvasEnd);
  document.querySelector(".btn-offcanvas-open").addEventListener("click", (e) => {
    bsOffcanvas.toggle();
  });

  document.addEventListener('click', (e) => {
    const navLinkEl = e.target.closest('.nav-link');
    if (!navLinkEl) {
      return;
    }
    const href = navLinkEl.getAttribute('href');
    document.querySelector(href).scrollIntoView();
  });

CodePen: codepen.io/itchief/pen/qBJMmBg