Разрешить прокрутку переполнения на отключенном наборе полей в IE11

Question

У меня есть div, который я установил в overflow-y: прокрутка с максимальной высотой. Внутри div находится список входных данных. Div заключен в тег fieldset с атрибутом 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" к каждому входному тегу и удалить его из тега fieldset.

Пример:

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 Пример ссылки

Answer 2

вы можете обернуть набор полей в дополнительный div и применить следующие стили.

.wrap{
  display: inline-block;
  width: 200px;
  height: 80px;
  overflow-y: scroll;
 }

Это Пример