サブメニューの垂直スクロールが機能しない

Question

問題があります。 私はサイト内のメニューナビゲーションとサブメニュー（ドロップダウン）を持っています。モバイルデバイスで自分のサイトを開いてメインメニューを開き、サブメニューをクリックすると、すべてのサブメニューアイテムが表示されますが、スクロールできません。スクロールは動きますが、何も起こりません。

私のCSSコード：私たちは勢いがモバイルデバイスでのスクロールを可能にするために触れるのオーバーフロースクロールタイプを設定-webkit-overflow-scrolling: touch;

を追加

.mobile-nav .smr-res-nav li { 
 
    margin: 5px 0; 
 
    list-style: none; 
 
    display: block; 
 
    max-width: 200px; 
 
    position: relative; 
 
} 
 

 
.mobile-nav .smr-res-nav li a { 
 
    font-size: 20px; 
 
    color: #FFF; 
 
    display: inline-block; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    font-weight: bold; 
 
} 
 

 
.site-navigation-wrapper { 
 
    float: left; 
 
    width: 100%; 
 
    display: block; 
 
    position: relative; 
 

 
} 
 
.main-navigation { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    text-align: center; 
 
} 
 
.main-navigation > ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: inline-block; 
 
} 
 
.main-navigation li { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    position: relative; 
 
} 
 
.main-navigation li:after { 
 
    content: ""; 
 
    background: #ff5050; 
 
    width: 100%; 
 
    bottom: -2px; 
 
    left: 0; 
 
    display: block; 
 
    height: 3px; 
 
    position: absolute; 
 
    visibility: hidden; 
 
    -webkit-transform: scaleX(0); 
 
    transform: scaleX(0); 
 
    -webkit-transition: all 0.3s cubic-bezier(0, 0.795, 0, 1); 
 
    -moz-transition: all 0.3s cubic-bezier(0, 0.795, 0, 1); 
 
    -ms-transition: all 0.3s cubic-bezier(0, 0.795, 0, 1); 
 
    -o-transition: all 0.3s cubic-bezier(0, 0.795, 0, 1); 
 
    transition: all 0.3s cubic-bezier(0, 0.795, 0, 1); 
 
} 
 
.main-navigation .smr-main-nav > .current-menu-item:after, 
 
.main-navigation .smr-main-nav > li:hover:after, 
 
.main-navigation .smr-main-nav ul > li:hover:after { 
 
    visibility: visible; 
 
    -webkit-transform: scaleX(1); 
 
    transform: scaleX(1); 
 
} 
 
.main-navigation a { 
 
    font-size: 13px; 
 
    color: #484848 !important; 
 
    
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    font-weight: bold; 
 
    padding: 5px; 
 
    -webkit-transition: all 0.1s ease-in-out; 
 
    -moz-transition: all 0.1s ease-in-out; 
 
    -ms-transition: all 0.1s ease-in-out; 
 
    -o-transition: all 0.1s ease-in-out; 
 
    transition: all 0.1s ease-in-out; 
 
} 
 
.main-navigation ul ul { 
 
    background: #ffffff; 
 
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2); 
 
    float: left; 
 
    position: absolute; 
 
    top: 103%; 
 
    left: -999em; 
 
    z-index: 99999; 
 
    padding: 0; 
 
    text-align: left; 
 
    opacity: 0; 
 
    -webkit-transition: opacity 0.3s cubic-bezier(0, 0.795, 0, 1); 
 
    -moz-transition: opacity 0.3s cubic-bezier(0, 0.795, 0, 1); 
 
    -ms-transition: opacity 0.3s cubic-bezier(0, 0.795, 0, 1); 
 
    -o-transition: opacity 0.3s cubic-bezier(0, 0.795, 0, 1); 
 
transition: opacity 0.3s cubic-bezier(0, 0.795, 0, 1); 
 
} 
 
.main-navigation ul ul li { 
 
    padding: 0 0 0 20px; 
 
} 
 
.main-navigation ul ul ul { 
 
    left: -999em; 
 
    top: 0; 
 
} 
 
.main-navigation ul ul a { 
 
    width: 200px; 
 
} 
 
.main-navigation ul li:hover > ul, 
 
.main-navigation ul li.focus > ul { 
 
    left: 0; 
 
    opacity: 1; 
 
} 
 
.main-navigation ul ul li:hover > ul, 
 
.main-navigation ul ul li.focus > ul { 
 
    left: 100%; 
 
} 
 
.main-navigation .sub-menu li:first-child a { 
 
    padding: 10px 0 5px; 
 
} 
 
.main-navigation .sub-menu li:last-child a { 
 
    padding: 5px 0 10px; 
 
} 
 
.main-navigation .sub-menu a { 
 
    padding: 5px 0 5px; 
 
} 
 
.main-navigation .menu-item-has-children > a:after { 
 
    font-family: "FontAwesome"; 
 
    content: "\f107"; 
 
    margin-left: 5px; 
 
} 
 
.main-navigation .sub-menu .menu-item-has-children > a:after { 
 
    font-family: "FontAwesome"; 
 
    content: "\f105"; 
 
    margin-right: 20px; 
 
    float: right; 
 
    }

<nav id="site-navigation" class="main-navigation" role="navigation"> 
 
    <ul id="smr-main-nav" class="smr-main-nav"> 
 
    <li id="menu- 
 
    item-21" class="menu-item menu-item-type-post_type menu-item-object-page 
 
    menu-item-home current-menu-item page_item page-item-2 current_page_item 
 
    menu-item-21"><a href="#">MAINMENU</a></li> 
 
    <li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item- 
 
    object-page menu-item-22"><a href="#">MAINMENU</a></li> 
 
    <li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item- 
 
    object-page menu-item-23"><a href="#">MAINMENU</a></li> 
 
    <li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item- 
 
    object-page menu-item-24"><a href="#">MAINMENU</a></li> 
 
    <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item- 
 
    object-page menu-item-25"><a href="#">MAINMENU</a></li> 
 
    <li id="menu-item-247" class="menu-item menu-item-type-post_type menu-item- 
 
    object-page menu-item-247"><a href="#">MAINMENU</a></li> 
 
    <li id="menu-item-207" class="menu-item menu-item-type-custom menu-item- 
 
    object-custom menu-item-has-children menu-item-207"><a href="#">MAINMENU</a> 
 
     <ul class="sub-menu"> 
 
     <li id="menu-item-176" class="menu-item menu-item-type-post_type menu-item- 
 
    object-page menu-item-176"><a href="#">SUBMENU</a></li> 
 
     <li id="menu-item-195" class="menu-item menu-item-type-post_type menu-item- 
 
    object-page menu-item-195"><a href="#">SUBMENU</a></li> 
 
     <li id="menu-item-198" class="menu-item menu-item-type-post_type menu-item- 
 
    object-page menu-item-198"><a href="#">SUBMENU</a></li> 
 
     <li id="menu-item-165" class="menu-item menu-item-type-post_type menu-item- 
 
    object-page menu-item-165"><a href="#">SUBMENU</a></li> 
 
     <li id="menu-item-313" class="menu-item menu-item-type-post_type menu-item- 
 
    object-page menu-item-313"><a href="#">SUBMENU</a></li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>

Answer 1

試してみます。以下に少し詳しく説明します：

自動設定は一部のデバイスでは機能しますが、スクロールするだけで確実に設定できます。 これは、ネイティブ感覚のスクロールを可能にする魔法の性質です。 これを正当化するように設定すると、等間隔のliが作成されます。 幅をすべての幅の合計よりも大きな値に設定する必要があります。