Как заставить раскрывающийся список (HTML) открываться на колесе прокрутки iOS

Question

Я относительно новичок в кодировании, и я стремлюсь учиться ... но ...

У меня есть следующее раскрывающееся окно HTML - я включил javascript и css на всякий случай.

Я хочу, чтобы, когда пользователь находился на устройстве iOS, когда пользователь нажимал на раскрывающийся список, чтобы параметры можно было выбирать с помощью колеса прокрутки iOS ... как показано на рисунке ниже, я надеюсь, что кто-то может помочь !

---

Код:

/* 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";
                    }
                }
            }

.dropbtn {
            background-color: #4CAF50;
            color: white;
            padding: 16px;
            font-size: 16px;
            border: none;
            cursor: pointer;
            }
            .dropbtn:hover, .dropbtn:focus {
            background-color: #3e8e41;
            }
            #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: inline-block;
            }
            .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f6f6f6;
            min-width: 250px;
            height: 300px;
            overflow-y: scroll;
            overflow-x: hidden;
            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;}

        <div class="dropdown">
            <button onclick="myFunction()" class="dropbtn">Dropdown</button>
            <div id="myDropdown" class="dropdown-content">
                <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
                <a href="#about">About</a>
                <a href="#base">Base</a>
                <a href="#blog">Blog</a>
                <a href="#contact">Contact</a>
                <a href="#custom">Custom</a>
                <a href="#support">Support</a>
                <a href="#tools">Tools</a>
            </div>
        </div>

Answer 1

Добро пожаловать на сайт!

Я думаю, что ваша проблема в том, что вы реализовали свой собственный раскрывающийся список, а не использовали встроенные теги и. Я считаю, что их использование заставит iOS автоматически отображать средство выбора при взаимодействии с этим элементом.

/* When the user clicks on the button,
        toggle between hiding and showing the dropdown content */
        function myFunction() {
            document.getElementById("dropdown-block").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("option");
            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";
                }
            }
        }

.dropbtn {
        background-color: #4CAF50;
        color: white;
        padding: 16px;
        font-size: 16px;
        border: none;
        cursor: pointer;
        }
        .dropbtn:hover, .dropbtn:focus {
        background-color: #3e8e41;
        }
        #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: none;
        }
        .dropdown-content {
        background-color: #f6f6f6;
        min-width: 250px;
        overflow-y: scroll;
        overflow-x: hidden;
        border: 1px solid #ddd;
        z-index: 1;
        display:block;
        }
        .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        }
        .dropdown a:hover {background-color: #ddd;}
        .show {display: block;}

<button onclick="myFunction()" class="dropbtn">Dropdown</button>    
<div id="dropdown-block" class="dropdown">        
  <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
  <select id="myDropdown" class="dropdown-content">
    <option href="#about">About</option>
    <option href="#base">Base</option>
    <option href="#blog">Blog</option>
    <option href="#contact">Contact</option>
    <option href="#custom">Custom</option>
    <option href="#support">Support</option>
    <option href="#tools">Tools</option>
  </select>
</div>