可滚动的下拉菜单在移动设备上不起作用答案

【问题标题】：Scrollable dropdown does not work on mobile可滚动的下拉菜单在移动设备上不起作用
【发布时间】：2019-06-18 16:09:38
【问题描述】：

下拉菜单不允许我在移动设备上滚动或选择选项。它在桌面上运行良好，如果我在 chrome 浏览器中模拟移动设备，它仍然可以运行，但是在 android 设备上测试时，选择输入时会出现下拉菜单，并显示一个滚动条，但不会让我选择任何东西或滚动浏览选项。

<div class="scrollable-dropdown-menu">
  <input id="${tableId}-mobile-securityGroups" href=""  type="search" placeholder="A Group"  data-toggle="dropdown" class="form-control typeahead m-b-0 " aria-expanded="false" value="" required>
  <input style="display: none;" id='${tableId}-securityGroupId-mobile' name='securityGroupId'>
</div>

@media (max-width: 500px) {

    .scrollable-dropdown-menu > span > div.tt-menu 
    {
        max-height: 100px;
        overflow-y: scroll;
    }
}

【问题讨论】：

overflow-y 和 overflow-x 在较旧的移动浏览器中可能不受支持。我记得特别是在三星浏览器中遇到过这个问题。

标签： javascript html css twitter-typeahead

【解决方案1】：

使用移动设备上的引导程序，打开下拉菜单会添加一个 .dropdown-backdrop 作为点击区域，以便在点击菜单外时关闭下拉菜单。将下拉背景 div 放在我的下拉列表前面的 z-index 为 990

【讨论】：