Bootstrap5のOffcanvasを使用する際、Offcanvasが開いている状態でbodyをスクロールし、その後Offcanvasを閉じると元の位置（トグルボタンの位置）に戻ってしまうという問題があります。ただし、トグルボタンを固定（fix）している場合は、この問題は発生しません。
これを解決するために、JavaScriptを使用してOffcanvasをトグルするようにします。以下にそのコードを示します。
var search_box = document.getElementById('search-box');
var search_box_canvas = new bootstrap.Offcanvas(search_box);
$('.toggle-search').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
search_box_canvas.toggle();
});上記のコードでは、まずOffcanvasの要素を取得し、新しいOffcanvasインスタンスを作成します。そして、トグルボタンがクリックされた際に、デフォルトのイベントと伝播を防ぎ、Offcanvasをトグルします。
この方法であれば、Offcanvasを閉じた後もスクロール位置を保持することができます。
Comment