Масштабируемое переполнение div в Microsoft IE / Edge - PullRequest
Новая
       8

Масштабируемое переполнение div в Microsoft IE / Edge

0 голосов
/ 05 января 2019 
<html>
<head>
  <style>
  .foo {
    position: absolute;
    background-color: #f00;
    width: 2000px;
    height: 50px;
    transform-origin: left;
    left: 0;
    transform: scaleX(0.1);
  }
  </style>
</head>
<body>
  <div class="foo"></div>
</body>
</html>

В большинстве браузеров работает нормально. Но в Microsoft IE / Edge горизонтальная полоса прокрутки появляется, несмотря на то, что ширина div меньше ширины экрана. Как мне от этого избавиться?

Мне нужно использовать transform: scaleX, так как размер и положение div рассчитываются на основе некоторых условий с использованием JavaScript. Однако скрипт гарантирует, что div никогда не исчезнет с экрана.

Ответы [ 2 ]

0 голосов
/ 07 января 2019

Вы можете добавить -ms-overflow-style: none;, чтобы избежать горизонтальной полосы прокрутки. 

   body {
        -ms-overflow-style: none;
    }

Для получения дополнительной информации об атрибуте вы можете обратиться к: https://developer.mozilla.org/en-US/docs/Web/CSS/-ms-overflow-style

the result

0 голосов
/ 05 января 2019

Вы можете использовать overflow-x: hidden;, чтобы отключить это.

...