Переполнение: скрытое не работает с переводом в положительном направлении

В последнее время я встретил странную вещь с overflow: hidden;. Я устанавливаю его в элемент, а затем я хочу преобразовать в него элементы с помощью translate(), когда он преобразуется в отрицательном направлении, он будет скрыт, но если я переведу в положительном направлении, он не будет скрыт. В настольных браузерах это действительно не показывает, но вы можете достичь этого с помощью мыши. А на мобильном телефоне это просто свитки, так что это самое худшее.

Вот пример, показывающий это: http://cssizer.com/KLHlPShW

Ответ 1

Итак, я весь день работал с чем-то подобным и понял, что, хотя у меня был

html, body {overflow:hidden; }

... если я добавлю position:absolute или position:relative в html и body, он исправляет проблему.

Ответ 2

Я переношу все в контейнер div с помощью следующего кода. Явно установите переполнение соответственно в обоих направлениях. Это удерживает ось X от прокрутки в Safari iOS, даже если есть элементы, переведенные справа от основной области содержимого.

Но производительность прокрутки значительно снижается, если вы не добавите -webkit-overflow-scrolling: touch;. Мне потребовалось много времени, чтобы найти это! Надеюсь, это поможет кому-то другому.

.scrollContainer {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

Ответ 3

У меня была такая же проблема, и вот как я ее исправил:

HTML

<div id="container">        <!-- defines "boundaries" of content -->
    <div id="content">      <!-- part of it must be hidden -->
    </div>
</div>

CSS

#container {
    overflow-x:hidden;
    overflow-y:hidden;
    z-index:2; 
}

#content {
    /* Translation code ...*/ 
    z-index:1;
}

Вот JSFiddle.