Question

从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）

Answer 1

https://github.com/Dogfalo/materialize/issues/2592

中报告的问题

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

Answer 2

找到了一个临时解决方案：似乎如果在调用init方法时在文档中使用类“ browser-default”的select元素，则该错误将消失。因此，我们可以像这样在主体上附加一个文档流，隐藏的select元素：

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

我知道这不是最终的解决方案，但似乎可以暂时修复该错误。需要在低级别的Materialize源代码上实现更好的解决方案。

使用Chrome Materialize v1.0.0时，鼠标滚轮滚动并不总是在Materialize下拉菜单中起作用

2 个答案: