使用 Chrome materialize v1.0.0 时，鼠标滚轮滚动在 Materialise 下拉菜单中并不总是有效答案

【问题标题】：Mouse wheel scroll does not always work in Materialize dropdown when using Chrome materialize v1.0.0使用 Chrome materialize v1.0.0 时，鼠标滚轮滚动在 Materialise 下拉菜单中并不总是有效
【发布时间】：2019-05-22 12:00:29
【问题描述】：

从 v0.100.2 升级到 v1.0.0 后，鼠标滚动在 Chrome 中只能间歇性工作。其他浏览器工作正常。

具体来说，如果您在下拉菜单的左上角区域使用鼠标光标滚动鼠标滚轮，它将起作用。但是如果你用鼠标滚轮滚动其他地方的光标，它就不起作用了。

另一个观察结果是，如果您在单击之前单击一个下拉菜单，然后鼠标滚轮滚动另一个下拉菜单，它将起作用，因此可能与下拉关闭事件有关。

这是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）

【问题讨论】：

标签： javascript css google-chrome scroll materialize

【解决方案1】：

https://github.com/Dogfalo/materialize/issues/2592报告的问题

我找到的解决方案是为.dropdown-content 类添加backface-visibility:hidden。看起来有些浏览器无法正确处理转换和滚动条。

【讨论】：

【解决方案2】：

找到一个临时解决方案：似乎当调用 init 方法时，如果文档中有一个带有“browser-default”类的 select 元素，那么这个 bug 就会消失。所以我们可以像这样将一个文档流外的隐藏选择元素附加到正文：

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

我知道这不是最终解决方案，但它似乎可以暂时修复错误。更好的解决方案需要在 Materialise 源代码的底层完成。

【讨论】：