Настройка overflow-x: hidden добавляет вертикальную полосу прокрутки

Когда я укажу overflow-x: hidden на элемент, который переполняется как по горизонтали, так и по вертикали, элемент получает вертикальную полосу прокрутки в дополнение к скрытию горизонтально переполненного содержимого. Я попытался добавить overflow-y: visible и даже просто overflow: visible, чтобы не влиять.

Я не понимаю, что делают эти свойства? Я думаю, что overflow-x не должно влиять на вертикальное переполнение вообще.

Это произошло в каждом браузере, который я пробовал.

Вот фрагмент, демонстрирующий эффект. Я использую теги <pre>, потому что они - простой способ создать переполненный контент, но, похоже, это происходит с любым тегом.

pre {
  height: 40px;
  width: 150px;
  margin-bottom: 50px; /* We need this so they don't overlap. */
}

#x-hidden {
  overflow-x: hidden;
}

#y-visible {
  overflow-x: hidden;
  overflow-y: visible;
}

#visible {
  overflow: visible;
  overflow-x: hidden;
}

<pre>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
  Integer mollis quis magna quis vulputate.
  Cras aliquet convallis efficitur.
</pre>

<pre id="x-hidden">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
  Integer mollis quis magna quis vulputate.
  Cras aliquet convallis efficitur.
</pre>

<pre id="y-visible">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
  Integer mollis quis magna quis vulputate.
  Cras aliquet convallis efficitur.
</pre>

<pre id="visible">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Praesent bibendum lorem felis, sit amet sodales nunc gravida eget.
  Integer mollis quis magna quis vulputate.
  Cras aliquet convallis efficitur.
</pre>

Ответ 1

Отметьте этот ответ на соответствующий вопрос: fooobar.com/questions/25193/...

Это объясняет, почему

el {
  overflow-x: hidden;
  overflow-y: visible;
}

отображается как

el {
  overflow-x: hidden;
  overflow-y: auto;
}

который обычно делает то же самое, что и

el {
  overflow-x: hidden;
  overflow-y: scroll;
}

поскольку значение auto overflow-y составляет scroll в большинстве браузеров.

Итак, для достижения этого эффекта мы не можем использовать свойства overflow-x/overflow-y. Я экспериментировал с свойством clip как потенциальной альтернативой, но пока не повезло: http://jsfiddle.net/qvEq5/

Ответ 2

Во-первых, эта скрипта показывает проблему, которую вы описываете.

Пока я не знаю, как обойти это, но это похоже на подсказки для этого здесь:

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

Ответ 3

Всего час назад у меня была аналогичная проблема, кроме проблемы, возникшей, когда я указал значение overflow как auto. Я не использовал overflow-x или overflow-y, мне просто нужно было полностью скомпоновать мои два списка, которые плавали на противоположных концах.

Что сработало для меня, так это то, что я изменил значение overflow на hidden. Попробуй это. Я установил max-width в 100% и вместо указания высоты я использовал overflow: hidden.

Надеюсь, что это поможет.

Ответ 4

Просто используйте переполнение: скрыто на обертке div с ограничениями размера. Извините мое форматирование в некоторой степени спешки сегодня.

<!DOCTYPE html>
<html>
<head>
<style>
div.hidden 
{
background-color:#00FF00;
width:100px;
height:100px;
overflow:hidden;
}
div.overflowing
{
width:300px;
height:200px;
}
</style>
</head>

<body>
<p>overflow:hidden</p>
<div class="hidden">
<div class="overflowing">
You can use the overflow property when you want to have better control of the layout. The default value is visible.
You can use the overflow property when you want to have better control of the layout. The default value is visible.
You can use the overflow property when you want to have better control of the layout. The default value is visible.
You can use the overflow property when you want to have better control of the layout. The default value is visible.
</div>
</div>
</body>
</html>

Смотрите здесь: http://jsfiddle.net/4PZC9/

Ответ 5

Попробуйте:

height: auto;
width: 100px;
overflow: hidden;

Должен сохранить элемент шириной 100 пикселей и позволить ему расширяться вертикально на основе его содержимого (без полос прокрутки).

Ответ 6

Попробуйте установить высоту. Либо сделайте это как 100%, либо автоматически проверьте это

jsfiddle

    height: auto;

Ответ 7

Попробуйте установить свойство отображения? Объявление переполнения работает с элементами уровня блока!

Ответ 8

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

Overflow: auto добавит полосу прокрутки только при необходимости (содержимое больше контейнера). Òverflow: visible добавит полосу прокрутки. Òverflow: hidden НЕ добавит полосу прокрутки.

Я понимаю, что вы хотите, чтобы x-контент был скрытым, поэтому overflow-x: hidden, но из вашего вопроса мне кажется, что не нужно, чтобы вертикальная полоса прокрутки отображала содержимое с вертикальным переполнением.

Возможно, проблема заключается в том, что для контейнера установлена фиксированная высота (или максимальная высота), а содержимое больше. Удалите высоту (или максимальную высоту), и вы избежите вертикальной полосы прокрутки.

... или, может быть, я сказал, просто не понял, каков желаемый эффект.

Ответ 9

Попробуйте это,

height: auto;
overflow:hidden;

Приветствия.

Ответ 10

Чтение вопроса... Я не вижу проблем...

Whe Я указываю overflow-x: hidden; на элементе он добавляет вертикальную полосу прокрутки.

Если он переполняет высоту (как вы только что сказали), то это вполне нормально.

Я попытался добавить overflow-y: visible; и даже просто переполнение: видимое, без эффекта.

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

Как сказал кулуар: X = горизонтальный; Y = вертикальный.