"overflow-x: hidden" только одна сторона?

Можно ли скрыть горизонтальное переполнение элемента только с одной стороны: влево или вправо? Что-то вроде overflow-x-right:hidden;. Я открыт для подсказок css и jquery.

Ответ 1

Все содержимое начинается слева, если не указано иное. Поэтому, если вы хотите, чтобы содержимое слева было скрыто, подумайте о создании элемента position: absolute и установите его на right: 0. Объедините это с overflow-x: hidden, которое должно выполнить вашу цель.

Ответ 2

Если CSS3 является опцией, "клип" определенно является вашим решением.

http://www.css3.com/css-clip/

Ответ 3

Когда вы говорите Горизонтальный, тогда у нас есть только одна боковая панель, а это находится внизу контейнера. Так что технически для этого нет ни левого, ни правого. Для вертикальных прокруток атрибут direction контейнера или родителей определяет, находится ли он справа или слева.

Это все, что вы можете сделать, с обычным CSS и обычным пользовательским интерфейсом браузера. В противном случае вы должны создать собственные элементы управления и виджеты пользовательского интерфейса.

Ответ 4

Вот как вы могли это сделать, используя clip-path, который заменил устаревшее свойство clip:

.outer {
  background-color: rgba(0,0,255,.5);
  width: 100px;
  height: 100px;
  margin: 100px;
  clip-path: inset( -100vw -100vw -100vw 0 );
}

.inner {
  background-color: rgba(255,0,0,.5);
  width: 200px;
  height: 80px;
  position: relative;
  top: 10px;
  left: -50px;
}

<div class="outer">
  <div class="inner"></div>
</div>