CSS overflow-x: видимый; и переполнение-у: скрыто; вызывая проблему полосы прокрутки

Предположим, у вас есть стиль и разметка:

ul
{
  white-space: nowrap;
  overflow-x: visible;
  overflow-y: hidden;
/* added width so it would work in the snippet */
  width: 100px; 
}
li
{
  display: inline-block;
}
<div>
  <ul>
    <li>1</li> <li>2</li> <li>3</li>
    <li>4</li> <li>5</li> <li>6</li>
    <li>7</li> <li>8</li> <li>9</li>
    <li>1</li> <li>2</li> <li>3</li>
    <li>4</li> <li>5</li> <li>6</li>
    <li>7</li> <li>8</li> <li>9</li>
    <li>1</li> <li>2</li> <li>3</li>
    <li>4</li> <li>5</li> <li>6</li>
    <li>7</li> <li>8</li> <li>9</li>
  </ul>
</div>

Когда вы просматриваете это. <ul> внизу есть полоса прокрутки, хотя я указал видимые и скрытые значения для переполнения х / у.

(наблюдается на Chrome 11 и в опере (?))

Я предполагаю, что должна быть какая-то спецификация w3c или что-то, что говорит об этом, но я не могу понять почему.

JSFiddle

ОБНОВЛЕНИЕ:- Я нашел способ добиться того же результата, добавив еще один элемент, обернутый вокруг ul, Проверьте это.

Источник

10 ответов

Решение

После некоторых серьезных поисков, кажется, я нашел ответ на свой вопрос:

от: http://www.brunildo.org/test/Overflowxy2.html

В Gecko, Safari, Opera "видимый" становится "автоматическим" также в сочетании с "скрытым" (другими словами: "видимый" становится "автоматическим" в сочетании с чем-либо, отличным от "видимого"). Gecko 1.8, Safari 3, Opera 9.5 довольно последовательны среди них.

также спецификация W3C гласит:

Вычисленные значения "overflow-x" и "overflow-y" совпадают с их указанными значениями, за исключением того, что некоторые комбинации с "visible" невозможны: если одно указано как "visible", а другое - "scroll" или "auto", тогда "visible" устанавливается на "auto". Вычисленное значение "переполнения" равно вычисленному значению "переполнения-x", если "переполнение-у" одинаково; в противном случае это пара вычисляемых значений 'overflow-x' и 'overflow-y'.

Укороченная версия:

Если вы используете visible для любого overflow-x или же overflow-y и что-то кроме visible для другого visible значение интерпретируется как auto,

Источник

Еще один дешевый хак, который, кажется, делает свое дело:

style="padding-bottom: 250px; margin-bottom: -250px;" на элементе, где вертикальное переполнение становится отсеченным, с 250 представляет столько пикселей, сколько нужно для выпадающего списка и т. д.

Источник

Первоначально я нашел способ обойти это при использовании плагина Cycle jQuery. Цикл использует JavaScript, чтобы установить мой слайд в overflow: hiddenпоэтому при настройке моих фотографий width: 100% картинки выглядели бы вертикально, и я заставил их !important и чтобы избежать показа слайд-анимации из коробки, которую я установил overflow: hidden в контейнер Div слайда. Надеюсь, это работает для вас.

ОБНОВЛЕНИЕ - Новое решение:

Оригинальная проблема -> http://jsfiddle.net/xMddf/1/(даже если я использую overflow-y: visible оно становится "авто" и фактически "прокручивается".)

#content {
    height: 100px;
    width: 200px;
    overflow-x: hidden;
    overflow-y: visible;
}

Новое решение -> http://jsfiddle.net/xMddf/2/(я нашел обходной путь, используя оболочку div для применения overflow-x а также overflow-y к различным элементам DOM, как James Khoury советовал по проблеме объединения visible а также hidden к одному элементу DOM.)

#wrapper {
    height: 100px;
    overflow-y: visible;
}
#content {
    width: 200px;
    overflow-x: hidden;
}
Источник

Для моего варианта использования добавление на div, который имеет переполнение, кажется, дает мне желаемый эффект сокрытия переполнения по оси Y, не давая мне полосу прокрутки по оси X (у меня есть ползунок карусели, который загружал изображения в полном размере, прежде чем масштабировать их снова вниз , и эти изображения занимали 75% высоты страницы при загрузке, поэтому не нуждались в ).

Родительский div-оболочка не требовался, просто фиксированный установить на переполняющий элемент. Я понимаю, что это решение может работать не для всех, но, безусловно, может помочь некоторым.

Источник

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

Мой подход состоял в том, чтобы отдельно применять:

  • overflow: visible свойство элемента боковой панели
  • overflow-y: auto свойство боковой панели внутренней обертки

Пожалуйста, проверьте пример ниже или онлайн-коде.

html {
  min-height: 100%;
}
body {
  min-height: 100%;
  background: linear-gradient(to bottom, white, DarkGray 80%);
  margin: 0;
  padding: 0;
}

.sidebar {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 200px;
  overflow: visible;  /* Just apply overflow-x */
  background-color: DarkOrange;
}

.sidebarWrapper {
  padding: 10px;
  overflow-y: auto;   /* Just apply overflow-y */
  height: 100%;
  width: 100%;
}

.element {
  position: absolute;
  top: 0;
  right: 100%;
  background-color: CornflowerBlue;
  padding: 10px;
  width: 200px;
}
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<div class="sidebar">
  <div class="sidebarWrapper">
    <div class="element">
      I'm a sidebar child element but I'm able to horizontally overflow its boundaries.
    </div>
    <p>This is a 200px width container with optional vertical scroll.</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
  </div>
</div>

Источник

Теперь существует новый способ решения этой проблемы - если вы удалите position: относительный из контейнера, который должен иметь видимый overflow-y, вы можете иметь видимый overflow-y и скрытый overflow-x, и наоборот (иметь overflow- x visible и overflow-y скрыты, просто убедитесь, что контейнер со свойством visible не расположен относительно.

См. Этот пост от CSS Tricks для более подробной информации - он работал для меня: https://css-tricks.com/popping-hidden-overflow/

Источник

Я столкнулся с той же проблемой, сработало следующее решение (стили применяются к родительскому блоку)

      overflow-y: visible;
overflow-x: clip;
Источник

Я использовал content+wrapper подход... но я сделал нечто иное, чем упомянуто до сих пор: я убедился, что границы моей оболочки не совпадают с границами содержимого в направлении, которое я хотел бы видеть.

Важное примечание: это было достаточно легко получить content+wrapper, same-bounds подход к работе в том или ином браузере в зависимости от различных комбинаций CSS position, overflow-*и т.д.... но я никогда не мог использовать этот подход, чтобы получить их все правильно (Edge, Chrome, Safari, ...).

Но когда у меня было что-то вроде:

  <div id="hack_wrapper" // created solely for this purpose
       style="position:absolute; width:100%; height:100%; overflow-x:hidden;">
      <div id="content_wrapper"
           style="position:absolute; width:100%; height:15%; overflow:visible;">         
          ... content with too-much horizontal content ... 
      </div>
  </div>

... все браузеры были счастливы.

Источник

Вот что сработало для меня:

На контейнере:

        .container {
      overflow-y: visible;
      overflow-x: clip;
  }

О содержащемся элементе:

        .item {
      width: 500px; /* any fixed value or it did not render in the browser */
  }
Источник

Небольшой "прием", который очень хорошо работает, если вы хотите, чтобы была видна только первая строка (но при этом требуется переполнение):

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

      gap: 10000rem;

Это действительно взломано, но отлично работает для чего-то вроде навигации на рабочем столе с меню, которое нужно переполнять ...

Источник
Другие вопросы по тегам