Предположим, у вас есть стиль и разметка:
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 и Opera (?))
Я предполагаю, что должна быть какая-то спецификация w3c или что-то такое, что говорит о том, что это произойдет, но я не могу понять почему.
ОБНОВЛЕНИЕ: - Я нашел способ добиться того же результата, добавив еще один элемент, обернутый вокруг ul
. Проверьте это.
overflow-x hidden;
его, он удалит прокрутку, но мне нужны элементы li, чтобы скрыть границу внизу, чтобы получить желаемый пунктирный эффект. Я не понимаю, почемуoverflow-x: visible
создает полосу прокрутки. Это не должно afaik.overflow: hidden;
и ребенка, вставленного вокруг<ul>
существаoverflow: visible
.Ответы:
После некоторых серьезных поисков, кажется, я нашел ответ на свой вопрос:
от: http://www.brunildo.org/test/Overflowxy2.html
также спецификация W3C гласит:
Укороченная версия:
Если вы используете
visible
для одногоoverflow-x
илиoverflow-y
и иного, чемvisible
для другого,visible
значение интерпретируется какauto
.источник
overflow-x:visible
во времяoverflow-y:hidden
без взлома родителей / детей? Хорошая койка, ИМО.overflow-y: visible
. Бу CSSеще один дешевый хак, который, кажется, делает свое дело:
style="padding-bottom: 250px; margin-bottom: -250px;"
на элементе, где вертикальное переполнение становится обрезанным, с250
представлением столько пикселей, сколько нужно для раскрывающегося списка, и т. д.источник
position: relative
или использование оберток было невозможно, это было единственное решение, которое работало, хотя для этого также требовалось добавить много уродливых полей в дочерние элементы внутри элемента, который я хотел установить,overflow-x: hidden
чтобы компенсировать хакерство. обивка. Это спасло меня, хотя, так что спасибо!Первоначально я нашел способ обойти это при использовании плагина Cycle jQuery. Цикл использует JavaScript для установки моего слайда
overflow: hidden
, поэтому при установке моих изображенийwidth: 100%
на изображения они будут выглядеть вертикально обрезанными, и поэтому я заставил их быть видимыми!important
во избежание показа анимации слайда из коробки, которую я установилoverflow: hidden
для контейнера div элемента горка. Надеюсь, это работает для вас.ОБНОВЛЕНИЕ - Новое решение:
Оригинальная проблема -> http://jsfiddle.net/xMddf/1/ (даже если я использую
overflow-y: visible
это становится «авто» и фактически «прокручивать».)Новое решение -> http://jsfiddle.net/xMddf/2/ (я нашел обходной путь, использующий div- обертку для применения
overflow-x
иoverflow-y
к различным элементам DOM, как Джеймс Хури советовал по проблеме объединенияvisible
иhidden
для одного элемента DOM.)источник
overflow-x:visible;
иoverflow-y:hidden
. А не наоборот.overflow-x
и-y
: обновленную скрипку .Я столкнулся с этой проблемой, когда пытался создать фиксированную позиционированную боковую панель с вертикально прокручиваемым содержимым и вложенными абсолютными позиционными дочерними элементами, которые будут отображаться за пределами боковой панели .
Мой подход состоял в том, чтобы отдельно применять:
overflow: visible
свойство элемента боковой панелиoverflow-y: auto
свойство боковой панели внутренней оберткиПожалуйста, проверьте пример ниже или онлайн-коде .
источник
auto
вместоhidden
.position
Я использовал
content+wrapper
подход ... но я сделал нечто иное, чем упомянуто до сих пор: я позаботился о том, чтобы границы моей оболочки не совпадали с границами содержимого в направлении, которое я хотел бы видеть .Важное примечание: было достаточно легко заставить
content+wrapper, same-bounds
подход работать в одном или другом браузере в зависимости от различных комбинаций CSSposition
,overflow-*
и т. Д., Но я никогда не мог использовать этот подход, чтобы получить их все правильно (Edge, Chrome, Safari,. ..).Но когда у меня было что-то вроде:
... все браузеры были счастливы.
источник
Теперь существует новый способ решения этой проблемы - если вы удалите position: относительный из контейнера, который должен иметь видимый overflow-y, вы можете иметь видимый overflow-y и скрытый overflow-x, и наоборот (иметь overflow- x visible и overflow-y hidden, просто убедитесь, что контейнер со свойством visible не расположен относительно.
Смотрите этот пост от CSS Tricks для более подробной информации - он работал для меня: https://css-tricks.com/popping-hidden-overflow/
источник