Класс allowBlocker для <div>отключает прокрутку в IE

Question

AngularJS ng-disable на div отключает прокрутку в IE

У меня есть потенциально длинный список букв, которые я хотел бы сделать прокручиваемыми. Однако, когда у пользователя есть только разрешения на просмотр, div отключен, поэтому он не может вносить никаких изменений. В Chrome это работает нормально, но в IE (v11.0.120) полоса прокрутки отключена, поэтому пользователь не может видеть ничего, кроме первых нескольких элементов.

Отключенный тег добавляется через директиву на основе учетных данных пользователя. Если у пользователя даже нет прав на просмотр, для ng-show задано значение false, а директива вообще не отображается.

Первым решением, которое я попытался, было попытка переопределить дочерний статус, добавив ng-disabled=false, но это ничего не делает.

Второе решение (которое технически работает) заключалось в переключении порядка элементов таким образом, чтобы прокрутка div находилась вне блокировщика разрешений. Проблема заключается в том, что если пользователи без разрешений по-прежнему смогут видеть элемент-обертку с данными, если они достаточно умны, чтобы открывать инструменты разработчика. Хотя они никогда не смогут перейти на страницу в первую очередь, я бы предпочел найти другое решение.

Вот (очень) упрощенная версия макета и ссылка на jsfiddle .

<div ng-app ng-controller="EmpCtrl">
    <div class="title">Employee Information</div>
    <div>{{employee.firstName}} {{employee.lastName}}</div>
    <div class="permissionBlocker" ng-disabled='true'>
    <div class="wrapper" data-employee-number="employee.Id">
      <div id="container">
        <ul>
          <li>Letter 1</li>
          <li>Letter 2</li>
          <li>Letter 3</li>
          <li>Letter 4</li>
          <li>Letter 5</li>
          <li>Letter 6</li>
          <li>Letter 7</li>
          <li>Letter 8</li>
          <li>Letter 9</li>
          <li>Letter 10</li>
          <li>Letter 11</li>
          <li>Letter 12</li>
          <li>Letter 13</li>
          <li>Letter 14</li>
          <li>Letter 15</li>
        </ul>
      </div>
    </div>
    </div>
</div>

Answer 1

У меня только что была очень похожая проблема. Это объясняется тем, как каждый браузер интерпретировал атрибут disabled из div (это включает использование ng-disabled, который устанавливает атрибут disabled). Chrome кажется более щадящим, а IE - просто ... IE. Глядя на ваш пример, вы хотите включить или отключить список на основе вашего div-блока блокировки разрешений. Вы можете использовать любую логику, которую планируете использовать для установки свойства области, т.е. $scope.permissionDenied = true а затем на соответствующем элементе используйте ng-class="{'disabled' : permissionDenied}". В зависимости от того, используете ли вы начальную загрузку и какой элемент вам может понадобиться применить стиль CSS, например:

.disabled {
    pointer-events:none; //This makes it not clickable
    opacity:0.6;         //This grays it out to look disabled
}

или вы можете использовать ng-show="!permissionDenied". Множество вариантов, но критически важно, чтобы атрибут div не устанавливался.