Question

我有一个div，我将其设置为溢出-y：以最大高度滚动。 div内部是输入列表。 div包装在具有disabled="disabled"属性的字段集标记内。仅在IE11中，这阻止了用户滚动div，以便他们可以看到列表中的其他输入。

有什么方法可以确保IE不会禁用它的滚动（最好仅使用CSS）？我曾尝试将pointer-events: auto !important;添加到div中，以期希望重新启用滚动功能，但这还是行不通的。

我有一个关于jsfiddle的示例，您可以在IE11中打开它：https://jsfiddle.net/7dwax3ys/4/show

div {
  width: 200px;
  height: 100px;
  overflow-y: scroll;
}

div.pointers {
  pointer-events: auto !important;
}

<fieldset disabled="disabled">
<legend>disabled</legend>
  <div>
    <input type="text" value="test">
    <input type="text" value="test">
    <input type="text" value="test">
    <input type="text" value="test">
    <input type="text" value="test">
    <input type="text" value="test">
    <input type="text" value="test">
    <input type="text" value="test">
  </div>
</fieldset>

<fieldset disabled="disabled">
<legend>disabled with pointer-events applied to div</legend>
  <div class="pointers">
    <input type="text" value="test">
    <input type="text" value="test">
    <input type="text" value="test">
    <input type="text" value="test">
    <input type="text" value="test">
    <input type="text" value="test">
    <input type="text" value="test">
    <input type="text" value="test">
  </div>
</fieldset>

<fieldset>
<legend>enabled</legend>
  <div>
    <input type="text" value="test">
    <input type="text" value="test">
    <input type="text" value="test">
    <input type="text" value="test">
    <input type="text" value="test">
    <input type="text" value="test">
    <input type="text" value="test">
    <input type="text" value="test">
  </div>
</fieldset>

Answer 1

没有适用于IE的任何直接解决方案。

启用IE中的滚动。您可以尝试向每个输入标签添加 disabled =“ disabled” 并将其从字段集标签中删除。

示例：

div {
  width: 200px;
  height: 100px;
  overflow-y: scroll;
}

div.pointers {
  pointer-events: auto !important;
}

<fieldset>
<legend>disabled</legend>
  <div>
    <input type="text" value="test" disabled="disabled">
    <input type="text" value="test" disabled="disabled">
    <input type="text" value="test" disabled="disabled">
    <input type="text" value="test" disabled="disabled">
    <input type="text" value="test" disabled="disabled">
    <input type="text" value="test" disabled="disabled">
    <input type="text" value="test" disabled="disabled">
    <input type="text" value="test" disabled="disabled">
  </div>
</fieldset>

<fieldset>
<legend>disabled with pointer-events applied to div</legend>
  <div class="pointers">
    <input type="text" value="test" disabled="disabled">
    <input type="text" value="test" disabled="disabled">
    <input type="text" value="test" disabled="disabled">
    <input type="text" value="test" disabled="disabled">
    <input type="text" value="test" disabled="disabled">
    <input type="text" value="test" disabled="disabled">
    <input type="text" value="test" disabled="disabled">
    <input type="text" value="test" disabled="disabled">
  </div>
</fieldset>

<fieldset>
<legend>enabled</legend>
  <div>
    <input type="text" value="test">
    <input type="text" value="test">
    <input type="text" value="test">
    <input type="text" value="test">
    <input type="text" value="test">
    <input type="text" value="test">
    <input type="text" value="test">
    <input type="text" value="test">
  </div>
</fieldset>

它可以为Internet Explorer解决此问题。

JSFiddle Example link

允许在IE11中的禁用字段集上进行溢出滚动

1 个答案: