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

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

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>

ОТВЕТЫ

Ответ 1

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

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

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

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

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

Краткая версия:

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

Ответ 2

другой дешевый хак, который, кажется, делает трюк:

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

Ответ 3

Первоначально я нашел способ обойти это при использовании плагина 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;
}

Ответ 4

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

Мой подход состоял из раздельного применения:

  • свойство 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>

Ответ 5

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

Важное примечание: было достаточно легко получить content+wrapper, same-bounds подход с 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

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

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

Ответ 7

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

Следующая причина -x остается скрытой..

overflow: visible;
overflow-y: scroll;

Тогда как если бы я переключил их на....

overflow-y: scroll;
overflow: visible;

Все отлично работает.