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

Webflowでナビゲーションのメニュー、モーダルを開いたときのスクロールを無効化する方法を紹介します。通常では上下にスクロールができてしまいますが、シンプルなコードを加えるだけで対応ができます。

矢野 将平
2023
6
27

みなさんこんにちは!今回は、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で運用するメリットを紹介しています!質問やご相談があれば、いつでもお問い合わせからご連絡お待ちしています!

この記事をシェア

あなたの事業に成長を

集客に特化したWebflowサイトで自社マーケティングをより柔軟に、より効果的にします。制作依頼を送信したら、無料打ち合わせであなたのニーズをヒアリングして、最適なソリューションを提案します。

支援先企業
株式会社リコー凸版印刷株式会社株式会社NTTドコモフォースタートアップス株式会社株式会社ニジボックス株式会社E-Housing株式会社ファンディオBooko株式会社unique onTerackathon株式会社ココウリE-Three

あなたもNoCodeのプロに

充実したサポートであなたも、最短3ヶ月間でノーコードWeb制作のプロになれます。

  • 300以上のノーコード動画教材

  • チャットサポート

  • 個別ビデオ通話相談