質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

16438閲覧

スマホのハンバーガーメニュー部分がスクロールできない問題

HisaoAndo

総合スコア14

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2017/03/16 10:55

編集2017/07/19 09:02

###前提・実現したいこと

webデザイナー初心者です。

PCではなくスマホ時の問題です。

###発生している問題・エラーメッセージ

http://www.thecoffeeshop.jp/ こちらのサイトの左上のハンバガーメニュー(っていうんですかね?)を開いたときに 「MAGAZINE」を選択後のメニューが多く下の方までスクロールしたいのですが、メニュー部分がスクロールできなくて困っています。

###試したこと
検索して
position: fixed;、overflow: auto;など試しましたがうまくいきませんでした。

###補足情報(言語/FW/ツール等のバージョンなど)

よろしくお願いいたします。


2017.07.19追記

ひとまず

↓で対応しておりました。

#header .item .item_sub { display: none; overflow-y: auto; //←追加 max-height: 280px; //←追加 }

が、

http://www.thecoffeeshop.jp/fs/thecoffeeshop/beans/00172

上記の「http://www.thecoffeeshop.jp/fs/〜」のページでまだ問題(スクロールされない)が解決できていない状態です。

引き続き、わかりましたらよろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

具体的に改善するにはそもそものデザインを変えないといけないので、応急処置として参考にしてください。

以下sp_header.cssの141行目

css

1#header .item .item_sub { 2 display: none; 3 overflow-y: auto; //←追加 4 max-height: 280px; //←追加 5}

としてみてはいかがでしょうか。
該当部分がスクロールできることを明示しないとデザイン的におかしいので、そこはメニューが見切れることで担保しています。

投稿2017/03/16 14:19

henteko

総合スコア21

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

HisaoAndo

2017/03/17 01:43

ご回答いただきありがとうございます! こんな簡単な対処法もあるんですね。。。 応急処置とさせていただきます。助かりました!
guest

0

css

1#header{ 2 // position: fixed; 3 position: absolute; 4} 5 6#ls_header{ 7 // position: fixed; 8 position: absolute; 9}

というふうにすると画面全体のスクロールは可能です。
画面は崩れてしまいますが、おそらく他の部分で影響がでています。

画面全体をスクロールするのではなく、黒い部分は固定で中身だけスクロールしたい場合は、スクロールしたい部分の高さをjsで計算し、overflow-y: scrollを指定することで可能です!

投稿2017/03/16 12:44

MasakazuFukami

総合スコア1869

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

HisaoAndo

2017/03/17 01:44

ご回答いただきありがとうございます! 参考にさせていただきます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問