Прокрутка колеса мыши не всегда работает в раскрывающемся меню «Материализация» при использовании Chrome materialize v1.0.0. - PullRequest
Новая
       23

Прокрутка колеса мыши не всегда работает в раскрывающемся меню «Материализация» при использовании Chrome materialize v1.0.0.

0 голосов
/ 22 декабря 2018

После обновления с v0.100.2 до v1.0.0 прокрутка мыши работает только в Chrome с перебоями.Другие браузеры работают нормально.

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

demo Еще одно замечание: если вы щелкнете по одному раскрывающемуся списку, прежде чем щелкнуть по колесику мыши, прокрутите другое раскрывающееся меню, оно будетработать, так что, предположительно, это как-то связано с событием закрытия выпадающего списка.

Это html структура: 

    <div id="filters" class="modal" style="overflow-y: visible;">
    <div class="modal-content">
        <h4>Filters</h4>
        <div class="row">
            <div>
                <div class="input-field col s6">

                    <select data-group="List">
                        <option selected="selected" value="0">1</option>
                        <option value="9">2</option>
                        <option value="13">3</option>
                        <option value="12">4</option>
                        <option value="8">5</option>
                        <option value="11">6</option>
                        <option value="19">7</option>
                    </select>
                    <label for="List">Label</label>
                </div>
                <div class="input-field col s6">
                    <select data-group="ListAgain">
                        <option selected="selected" value="0">one</option>
                        <option value="26">two</option>
                        <option value="25">three</option>
                        <option value="24">four</option>
                        <option value="29">five</option>
                        <option value="23">six</option>
                        <option value="27">seven</option>
                        <option value="30">eight</option>
                        <option value="22">nine</option>
                        <option value="28">ten</option>
                        <option value="21">eleven</option>
                        <option value="31">twelve</option>
                        <option value="0">---</option>
                        <option value="10015">13</option>
                        <option value="10019">14</option>
                        <option value="10021">15</option>
                        <option value="10012">16</option>
                        <option value="10018">17</option>
                        <option value="10011">18</option>
                        <option value="10016">19</option>
                        <option value="10014">20</option>
                        <option value="10020">21</option>
                        <option value="10013">22</option>
                        <option value="10017">23</option>
                    </select>
                    <label for="ListAgain">Label Again</label>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="col right">
    <div class="right">
        <a id="show-filters" href="#filters" class="btn-floating modal-trigger" title="Filters">
            <i class="material-icons">filter_list</i>
        </a>
    </div>
</div>

https://codepen.io/frostless/pen/bQPLqK (не всегда работает v1.0.0)https://codepen.io/frostless/pen/aKQEXO (всегда работает v0.100.2)

Ответы [ 2 ]

0 голосов
/ 07 марта 2019

О проблеме сообщили в https://github.com/Dogfalo/materialize/issues/2592

Решение, которое я нашел, добавляет backface-visibility:hidden для .dropdown-content класса.Похоже, что некоторые браузеры не могут правильно обрабатывать преобразования и полосы прокрутки.

0 голосов
/ 05 января 2019

Нашли временное решение: кажется, что если в документе при вызове метода init присутствует элемент select с классом browser-default, ошибка исчезнет.Таким образом, мы можем добавить к телу скрытый элемент select вне потока документов следующим образом: 

$(document).ready(function () {
    $('body').append('<select class="browser-default" style="position:absolute;visibility:hidden"></select>'); //this is the hack
    M.AutoInit();
})

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

...