在IE中可停用ul上的滚动条,可在Chrome中使用

时间:2018-11-06 16:42:43

标签: javascript jquery html css

我正在Google MDL中使用UL标签在输入上提供弹出菜单。以下是CSS

    .ie-specific{
        -ms-overflow-style:scrollbar;
        max-height:300px;
    }

和HTML标记

            <div class="page-content">
                <!-- Specialty Selection -->
                <div class="mdl-grid">
                    <div class="mdl-cell mdl-cell--4-col"></div>
                    <div class="mdl-cell mdl-cell--4-col">
                        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label mdl-selectfield mdl-js-selectfield">
                            <input class="mdl-textfield__input" type="text" id="Specialty">
                            <label class="mdl-textfield__label" for="sample2">Specialty</label>
                            <div class="">
                                <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect ie-specific" for="Specialty" id="SpecialtyList" style="overflow-y:scroll; max-height:300px;">

                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="mdl-cell mdl-cell--4-col"></div>
                </div>
            </div>

UL是由JS查询构建的,该JS查询获取查询结果并将其用于构建选项;

   $(document).ready(function () {
        $.ajax({
            url: "GetSpecialties.ashx",
            cache: false,
            success: function (data) {

                var parent = document.getElementById("SpecialtyList");

                data.forEach(function(el) {
                    var li = document.createElement("li");
                    var liClass = document.createAttribute("class");

                    liClass.value = "mdl-menu__item"
                    li.setAttributeNode(liClass);

                    li.innerText = el.Name;
                    parent.appendChild(li);
                    componentHandler.upgradeDom(parent);
                });


            }
        });
    });

在Chrome浏览器中出现问题时,我得到了滚动条,并可以使用它来滚动选项;在IE中,滚动条被禁用,您无法滚动以查看后面的选项。

我同时使用了JQuery和Google Material Design Light

0 个答案:

没有答案