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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

受付中

drawerがスマホだとメニュー内をスクロールできない

削除済ユーザー
削除済ユーザー

総合スコア0

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0回答

0評価

0クリップ

2閲覧

投稿2017/12/25 06:35

###前提・実現したいこと
ドロワーメニューを追加したいです。
drawer.js、iscroll.jsを使用しています。

###発生している問題
PCではサブメニューを開き、長くなってもスライドメニュー部分のみをスライドできますが、
スマホでは全く動きません。
丸2日いじりまくりましたが、何をやっても直りません。
お力を貸していただけませんでしょうか。
iscroll.js、drawer.jsは文字数の関係でコードは載せてられませんでした(手を加えておりません)

###該当のソースコード

HTML

<body class="drawer drawer--right"> <div class="spMenu"> <button type="button" class="drawer-toggle drawer-hamburger"> <span class="drawer-hamburger-icon"></span> <span class="drawer-txt">MENU</span> </button> <nav class="drawer-nav"> <ul class="drawer-menu"> <li class="drawer-dropdown"> <a href="#" data-toggle="dropdown">メニュー1</a> <ul class="drawer-dropdown-menu"> <li> <a href="#">メニュー1-1</a> </li> </ul> </li> </ul> </nav> </div>

CSS

/*!------------------------------------*\ Base \*!------------------------------------*/ .drawer-open { overflow: hidden !important; } .drawer-nav { position: fixed; z-index: 101; top: 0; overflow: auto; width: 50%; height: 100%; color: #222; background-color: #fff; text-align: center; } .drawer-nav::-webkit-scrollbar { display: none; } .drawer-nav img { width: 50px; margin: 3rem 0; } .drawer-menu { margin: 0; padding: 0; list-style: none; background: #eeeef0; overflow: auto; -webkit-overflow-scrolling: touch; } .drawer-menu > li { font-size: 1.2rem; line-height: 3.5; text-align: left; text-indent: 2rem; border-bottom: 1px solid #cbcbcb; } .drawer-menu > li:last-child { border-bottom: none; } .drawer-menu > li a { display: block; width: 100%; height: 100%; font-size: 1.2rem; } .drawer-menu-item { font-size: 1.3rem; display: block; padding: 1.5rem 2rem; text-decoration: none; color: #222; border-bottom: 1px dotted #222; } .drawer-menu-item:hover { text-decoration: underline; color: #555; background-color: transparent; } /*! overlay */ .drawer-overlay { position: fixed; z-index: 100; top: 0; left: 0; display: none; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .2); } .drawer-open .drawer-overlay { display: block; } /*!------------------------------------*\ Top \*!------------------------------------*/ .drawer--top .drawer-nav { top: -100%; left: 0; width: 100%; height: auto; max-height: 100%; -webkit-transition: top .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: top .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); } .drawer--top.drawer-open .drawer-nav { top: 0; } .drawer--top .drawer-hamburger, .drawer--top.drawer-open .drawer-hamburger { right: 0; } /*!------------------------------------*\ Right \*!------------------------------------*/ .drawer--right .drawer-nav { right: -50%; -webkit-transition: right .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: right .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); } .drawer--right.drawer-open .drawer-nav, .drawer--right .drawer-hamburger, .drawer--right.drawer-open .drawer-navbar .drawer-hamburger { right: 0; } .drawer--right.drawer-open .drawer-hamburger { right: 50%; } /*!------------------------------------*\ Hamburger \*!------------------------------------*/ .drawer-hamburger { position: fixed; z-index: 104; top: 0; display: block; box-sizing: content-box; width: 3rem; padding: 0; padding-top: 18px; padding-right: 1.8rem; padding-bottom: 30px; padding-left: .75rem; -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); border: 0; outline: 0; color: #262626; background-color: transparent; } .drawer-hamburger:hover { cursor: pointer; background-color: transparent; } .drawer-hamburger-icon { position: relative; display: block; margin: 10px 0 13px; } .drawer-hamburger-icon, .drawer-hamburger-icon:before, .drawer-hamburger-icon:after { width: 100%; height: 2px; -webkit-transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); transition: all .6s cubic-bezier(0.190, 1.000, 0.220, 1.000); background-color: #222; } .drawer-hamburger-icon:before, .drawer-hamburger-icon:after { position: absolute; top: -10px; left: 0; content: ' '; } .drawer-hamburger-icon:after { top: 10px; } .drawer-open .drawer-hamburger-icon { background-color: transparent; } .drawer-open .drawer-hamburger-icon:before, .drawer-open .drawer-hamburger-icon:after { top: 0; } .drawer-open .drawer-hamburger-icon:before { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .drawer-open .drawer-hamburger-icon:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .drawer-txt { font-size: 1rem; } /*!------------------------------------*\ Dropdown \*!------------------------------------*/ .drawer-dropdown-menu { display: none; box-sizing: border-box; width: 100%; margin: 0; padding: 0; background-color: #fafafa; } .drawer-dropdown-menu > li { width: 100%; list-style: none; font-size: 1.3rem; border-bottom: 1px solid #cbcbcb; } .drawer-dropdown-menu > li:last-child { border-bottom: none; } .drawer-dropdown-menu-item { line-height: 3.75rem; display: block; padding: 0; padding-right: .75rem; padding-left: 1.5rem; text-decoration: none; color: #222; } .drawer-dropdown-menu-item:hover { text-decoration: underline; color: #555; background-color: transparent; } /*! open */ .drawer-dropdown.open > .drawer-dropdown-menu { display: block; } /*! drawer-caret */ .drawer-dropdown .drawer-caret { display: inline-block; width: 0; height: 0; margin-left: 4px; -webkit-transition: opacity .2s ease, -webkit-transform .2s ease; transition: opacity .2s ease, -webkit-transform .2s ease; transition: transform .2s ease, opacity .2s ease; transition: transform .2s ease, opacity .2s ease, -webkit-transform .2s ease; -webkit-transform: rotate(0deg); transform: rotate(0deg); vertical-align: middle; border-top: 4px solid; border-right: 4px solid transparent; border-left: 4px solid transparent; } /*! open */ .drawer-dropdown.open .drawer-caret { -webkit-transform: rotate(180deg); transform: rotate(180deg); } /*!------------------------------------*\ Container \*!------------------------------------*/ .drawer-container { margin-right: auto; margin-left: auto; }

javascript

<script> $(document).ready(function () { $('.drawer').drawer({ iscroll: { mouseWheel: false, preventDefault: false }, }); }); </script>

###試したこと
・overflow: autoにしてみる
・jqueryのバージョンを変えてみる
・htmlのjavascriptの記載順序を変えてみる
・下記サイトを参考にして修正してみる
ハンバーガーメニューdrawer.jsのスクロールが実機で効かない
iScroll.js と drawer.js のハンバーガーメニューがAndroidで動かない
jquery「Drawer」でレスポンシブメニューを作る際に、スクロールが効かなくなった場合の対処法

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。