メニューオープン時のスクロールを無効化する方法

みなさんこんにちは！今回は、Webflowでナビゲーションのメニュー、モーダルを開いたときのスクロールを無効化する方法を紹介します。

今回の記事は動画でも紹介しています⏬

スクロール無効化のためのコード

$(document).ready(function() {
$('.class-name').click(function() {
$('body').toggleClass('overflow__hidden');
});
});

‍

.class-nameの箇所を、メニューボタンのクラス名と合わせてください。overflow__hiddenというクラス名を作り、overflow:hidden;のCSSを当ててください。その後付与したクラスは外します。

コードの説明

.class-name箇所がクリックされた時、body要素に対してoverflow__hiddenというクラスを付与しています。bodyにoverflow:hidden;が付くと、画面がスクロールできなくなる特徴があります。

上手く動作しない場合

考えられるパターンとして、クラス名の書き方が間違っていることが多いです。WebflowのDesignerで付与しているクラス名がNav Buttonだとすると、コードで記載する際はnav-buttonという形になります。

Webflowの特徴として、・大文字→小文字・スペース→-(ハイフン)とクラス名をコードで記載する際は、調整してください。

まとめ

コードを追加、クラス名を合わせて、cssを付与するだけで簡単に実装ができます。Webflow標準の機能だけではできないことも、コードを記述するだけで実装することができます。

このほかにもWebflowの使い方や、Webflowを用いたWeb制作活動、自社サイトをWebflowで運用するメリットを紹介しています！質問やご相談があれば、いつでもお問い合わせからご連絡お待ちしています！