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


455

Припустимо, у вас є стиль та розмітка:

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>нижній частині є смуга прокрутки, хоча я вказав видимі та приховані значення для переповнення x / y.

(спостерігається в Chrome 11 та opera (?))

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

JSFiddle

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


Який бажаний результат? jsfiddle.net/Kyle_Sevenoaks/3xv6A/2
Кайл

@kyle, це має виглядати трохи більше, як: jsfiddle.net/3xv6A/5 На жаль, якщо я встановив, overflow-x hidden;він видаляє прокрутку, але як мені потрібні елементи li, щоб приховати межу внизу, щоб це дало бажаний штриховий ефект. Я не розумію, чому overflow-x: visibleстворюється смуга прокрутки. Це не повинно afaik.
Джеймс Хоурі

@JamesKhoury Ви можете трохи детальніше розглянути своє рішення? Я не можу реально змусити його працювати
Джордж Катсанос

1
@GeorgeKatsanos Вирішення: jsfiddle.net/3xv6A/9 покладається на істоту-батька overflow: hidden;та дитину, вставлену навколо <ul>істоти overflow: visible.
Джеймс Хоурі

@JamesKhoury Ви думаєте, що це може працювати на embed.plnkr.co/2rbaISwvzuKhyPEFpBKD
Джордж Катсанос

Відповіді:


681

Після серйозного пошуку, здається, я знайшов відповідь на моє запитання:

з: http://www.brunildo.org/test/Overflowxy2.html

У Gecko, Safari, Opera, "видимий" стає "автоматичним" також у поєднанні зі "прихованим" (іншими словами: "видимий" стає "автоматичним" у поєднанні з чим-небудь іншим, відмінним від "видимого". Gecko 1.8, Safari 3, Opera 9.5 досить послідовні серед них.

також специфікація W3C говорить:

Обчислені значення 'overflow-x' та 'overflow-y' такі ж, як і їх задані значення, за винятком того, що деякі комбінації з 'видимим' неможливі: якщо одна вказана як 'видима', а інша - 'прокрутка' або "авто", тоді "видимий" встановлено на "авто". Обчислене значення 'overflow' дорівнює обчисленому значенню 'overflow-x', якщо 'overflow-y' те саме; інакше це пара обчислених значень 'overflow-x' та 'overflow-y'.

Коротка версія:

Якщо ви використовуєте visibleдля того overflow-xчи іншого overflow-yта іншого, ніж visibleдля іншого, visibleзначення трактується як auto.


264
Я розумію, що W3C визначає це таким чином, але яка мотивація за цим? Я вважаю це досить дивною та непослідовною поведінкою, що призводить до безладної роботи, яка потребує додавання тривіальних HTML-елементів.
Ервін

21
@Erwin Я згоден, сподіваюся, хтось вирішить оновити специфікацію.
Джеймс Хоурі

125
Ти маєш рацію, але це не має сенсу. Найпоширеніша причина, по якій ви навіть хочете x і y, - це ви можете зробити одне приховане, а друге видимим.
рятувальний

91
Це каліка. Чому ми не можемо дозволити overflow-x:visibleпід час overflow-y:hiddenбез злому батька / дитини? Гарненький нар, ІМО.
Slink

34
Це зовсім калічить. Я намагався зробити купу спасних посилань у навігаційній панелі Bootstrap прокрутки по горизонталі, але це розбиває спадні місця, на які покладається overflow-y: visible. Бу CSS!
Енді

131

ще один дешевий злом, який, здається, виконує трюк:

style="padding-bottom: 250px; margin-bottom: -250px;"на елементі, де вертикальне переповнення стає обрізаним, 250представляючи стільки пікселів, скільки вам потрібно для вашого спаду тощо.


6
велике спасибі, хоча це відчувається хакі, але, здається, це найкращий спосіб вирішити проблему. Переливи страшні в css :(
Сергій Єремеєв

11
Це робить горизонтальну смугу прокрутки
здалекою

2
Це також блокує події вказівника на 250 пікселів нижче елемента. Але я знайшов шлях для цього, і це рішення - це те, що я використовую.
Кріс Чудзіцький

2
Через 2 роки, і це все ще здається найкращою відповіддю на цю проблему ... Сподіваємось, що ще один браузер (Microsoft Edge) скаче проект Chromium з відкритим кодом, ми побачимо швидший розвиток функцій браузера, які мають значення, а також кращий браузер сумісність.
Спенсер О'Рейлі

У моєму конкретному сценарії, коли видалення position: relativeабо використання обгортки було неможливим, це було єдиним рішенням, яке працювало, хоча воно також вимагало додавати багато потворних запасів дочірнім елементам всередині елемента, який я хотів встановити, overflow-x: hiddenщоб компенсувати хакі підкладка. Це врятувало мене, хоча, тому дякую!
Філіп Стратфорд

81

Я спочатку знайшов CSS спосіб обійти це питання, використовуючи плагін Cycle jQuery. Цикл використовує JavaScript для встановлення мого слайда overflow: hidden, тому при встановленні моїх фотографій width: 100%картинки виглядатимуть вертикально вирізаними, і тому я змусив їх бути видимими !importantта уникати показу анімації слайдів із поля, яке я встановив overflow: hiddenна діві контейнера слайд. Сподіваюся, це працює для вас.

ОНОВЛЕННЯ - Нове рішення:

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

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

Нове рішення -> http://jsfiddle.net/xMddf/2/ (Я знайшов вирішення за допомогою обгорткового діва для нанесення overflow-xта overflow-yдо різних елементів DOM, як Джеймс Хоурі радив щодо проблеми поєднання visibleта hiddenдо одного елемента DOM.)

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

12
Як це застосовується? Схоже, це не працює над overflow-x або overflow-y.
Джеймс Хоурі

1
@Macumbaomuetre Ясніше, дякую +1. Це схоже на додане я "оновлення". Спочатку я не зміг змінити обгортковий дів, і моє рішення закінчилося схожим на: jsfiddle.net/3xv6A/338
James Khoury

9
Це рішення не застосовується. Питання є overflow-x:visible;і overflow-y:hidden. Не навпаки.
Якобовський

1
@TomasJansson @Edward Це робить роботу, ви просто повинні свопу , де ви застосовуєте overflow-xі -y: оновлену скрипку .
Просто студент

1
це виходить з ладу, як тільки обгортка чомусь набирає ширину - jsfiddle.net/ad1941k9/16
Девід Мейстер

10

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

Мій підхід складався з окремо застосованих:

  • 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>


2
Я впевнений, що це те саме рішення, що й інші, окрім як autoзамість hidden.
Джеймс Хоурі

@JamesKhoury Але це єдине, що я можу зрозуміти, оскільки він вказує на використанняposition
Guichi

7

Я використовував 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>

... всі браузери були задоволені.


6

Зараз існує новий спосіб вирішення цього питання - якщо ви видалите позицію: відносно контейнера, який повинен мати вигляд переповнення-у, ви можете мати переповнення-видимі та переповнені-х приховані, і навпаки (мати переповнення- x видимий та переповнений-y приховано, просто переконайтесь, що контейнер із видимим властивістю не розташований у відносному стані).

Дивіться цю публікацію з CSS Tricks для отримання більш детальної інформації - вона працювала для мене: https://css-tricks.com/popping-hidden-overflow/


2
але це вимагатиме трохи javascript, щоб правильно розмістити елемент, якщо він абсолютний
gaurav5430
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.