通过自定义下拉列表在移动设备上滚动非常烦人

Question

所以我将this用于以下代码。我需要一个有搜索栏的下拉列表。我得到了它我想要它但在移动设备上滚动是超级奇怪和错误。 有时你可以滚动，有时候你只能在移动设备的大列表中间停留，桌面滚动很好。

任何有关如何解决这个问题的小贴士？

＆＃13;

＆＃13;

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}

＆＃13;

.dropbtn {
  display: block;
  width: 100%;
  height: 70px;
  border-top: 1px solid #575757;
  border-left: none;
  border-right: none;
  font-size: 1em;
  line-height: 4.5;
  color: #D6C196;
  text-indent: 5px;
  background-color: white;
  text-align: left;
}

#myInput {
  border-box: box-sizing;
  background-image: url('searchicon.png');
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
}

#myInput:focus {
  outline: 3px solid #ddd;
}

.dropdown {
  position: relative;
  display: block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  width: 100%;
  overflow: auto;
  border: 1px solid #ddd;
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {
  background-color: #ddd
}

.show {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
  <div class="dropdown">
    <button onclick="myFunction()" class="dropbtn">Selecteer een categorie &#x25BC;</button>
    <div id="myDropdown" class="dropdown-content">
      <input type="text" placeholder="Zoeken" id="myInput" onkeyup="filterFunction()">
      <a href="www.google.nl">Google</a>
      <a href="www.google.nl">Google</a>
      <a href="www.google.nl">Google</a>
      <a href="www.google.nl">Google</a>
      <a href="www.google.nl">Google</a>
      <a href="www.google.nl">Google</a>
      <a href="www.google.nl">Google</a>
      <a href="www.google.nl">Google</a>
      <a href="www.google.nl">Google</a>
      <a href="www.google.nl">Google</a>
      <a href="www.google.nl">Google</a>
      <a href="www.google.nl">Google</a>
      <a href="www.google.nl">Google</a>
      <a href="www.google.nl">Google</a>
      <a href="www.google.nl">Google</a>
      <a href="www.google.nl">Google</a>
      <a href="www.google.nl">Google</a>
      <a href="www.google.nl">Google</a>
      <a href="www.google.nl">Google</a>
      <a href="www.google.nl">Google</a>
      <a href="www.google.nl">Google</a>
      <a href="www.google.nl">Google</a>
      <a href="www.google.nl">Google</a>
      <a href="www.google.nl">Google</a>
      <a href="www.google.nl">Google</a>
      <a href="www.google.nl">Google</a>
      <a href="www.google.nl">Google</a>
      <a href="www.google.nl">Google</a>
      <a href="www.google.nl">Google</a>
      <a href="www.google.nl">Google</a>
      <a href="www.google.nl">Google</a>
      <a href="www.google.nl">Google</a>
      <a href="www.google.nl">Google</a>
      <a href="www.google.nl">Google</a>
      <a href="www.google.nl">Google</a>
      <a href="www.google.nl">Google</a>
    </div>
  </div>
  <script>
  </script>
</div>

＆＃13;

＆＃13;

＆＃13;

亲切的问候， 彼得