Содержание

css — Почему overflow-y: hidden добавляет горизонтальный скролл?

Вопрос задан

Изменён 5 лет 4 месяца назад

Просмотрен 2k раза

Почему overflow-y: hidden, при условии что контент превышает ширину, добавляет горизонтальный скролл? И возможно ли от него избавится без overflow-x:hidden?

.parent{
  width:100px;
  height: 100px;
  
  border:1px solid;
  
  overflow-y:hidden;
  
}

.child{
  width:110px;
  height:200px;
  
  background: orange;
}
<div>
  <div></div>
</div>
  • css
  • вёрстка
2

Все по спецификации

Значение: как указано, за одним исключением, visible меняется на auto, если у одного из свойств overflow-x или overflow-y значение не visible.

следовательно код в примере аналогичен

overflow-y:hidden;
overflow-x:auto;

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

Следовательно для решения нужно явно задать overflow-x:hidden;

Не знаю,что ты пытаешься сделать, но может быть вот это.

.parent{
        width:100px;
        height: 100px;
        border:1px solid;
        overflow: hidden;
        overflow-y:visible;
 }
1

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Значение overflow x y меняется на auto при задании только одной из координат CSS

Споткнулся о следующее поведение параметра overflow:

Если значение overflow-x любое кроме initial, inherit, или unset то значение overflow-y уже не будет прежним, а поменяться на auto.

Это мне очень сильно жизнь подпортило, если кто знает, что можно тут придумать говорите не молчите 🙂

Ссылка на CodePen

* {
  box-sizing: border-box;
}
#one td, #two td {
  max-width: 100px;
  height: 30px;
  padding: 17px 10px;
  border: solid 1px black;
  position: relative;
  background: #fff;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow-x: hidden;
  overflow-y: hidden;
}
#table td:hover {
  overflow-x: overlay;
  text-overflow: initial;
}
td::after {
  content: "";
  width: 99px;
  height: 10px;
  background: red;
  position: absolute;
  left: -1px;
  bottom: -7px;
  cursor: n-resize;
  z-index: 999;
}
#one td {
  z-index: 2;
}
#two td {
  z-index: 1;
}
<table>
  <tr>
    <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
 
  Similique, eligendi?</td>
  </tr>
  <tr>
    <td>two</td>
  </tr>
</table>

Красная полоска подразумевается для resize’a ячеек и нужно разкомментировать overflow чтобы понять суть проблемы.

  • css
  • overflow

Из вопроса совершенно непонятно, что ты хочешь сделать, так что только про overflow.

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

visible используется auto. Однако, можно как угодно комбинировать scroll, hidden, auto и даже overlay, который снова поддерживается хромом.

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

1

Дефолтное значение параметра overflow это visible, независимо от того используете ли Вы overflow-x, overflow-y, или просто overflow.

Значение overlay из Вашего примера не стандартизировано и официально поддерживается только Webkit браузерами.

Если Вы испытываете некорректное поведение данного параметра с определенным(и) браузерам(и), то стоит указывать требуемое Вам значение explicitly.

Пример использования:

div {
   overflow-x: hidden;
   overflow-y: scroll;
}
3

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

overflow-clip-margin — CSS: Каскадные таблицы стилей

Свойство CSS overflow-clip-margin определяет, насколько далеко за его пределами элемент с переполнением: клип может быть закрашен перед обрезкой. Граница, определяемая этим свойством, называется краем клипа переполнения блока.

 /* <длина> значений */
край клипа переполнения: 20px;
край клипа переполнения: 1em;
/* <визуальное поле> | <длина> */
поле переполнения клипа: поле содержимого 5px;
/* Глобальные значения */
край клипа переполнения: наследовать;
край клипа переполнения: начальный;
край клипа переполнения: вернуться;
край-клип-переполнения: слой возврата;
край клипа переполнения: не установлен;

Значение , которое по умолчанию равно padding-box , указывает край блока, используемый в качестве исходного края края клипа переполнения. Значение , указанное в overflow-clip-margin , должно быть неотрицательным.

Примечание: Если элемент не имеет переполнения : clip , то это свойство будет игнорироваться.

Начальное значение 0px
Применяется ко всем элементам
Унаследовано нет
Вычисленное значение вычисленное и ключевое слово 900 38
Тип анимации дискретный
 край-клип-переполнения = 
  || 
  
 "> = 
 content-box | 
 padding-box | 
 border-box

HTML 

 

  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut Labore et dolore magna aliqua.  Ut enim ad minim veniam,
  quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo
  вытекать Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur.

CSS 

 .box {
  граница: 3 пикселя, сплошной черный цвет;
  ширина: 250 пикселей;
  высота: 100 пикселей;
  перелив: зажим;
  край клипа переполнения: 20px;
}

Результат

9 0039
Спецификация
Модуль переполнения, уровень 3
# overflow-clip-margin CSS

Таблицы BCD загружаются только в браузере с включенным JavaScript. Включите JavaScript для просмотра данных.

  • Связанные свойства CSS: Text-Overflow , Белое пространство , Overflow , Overflow-Inline , Overflow-X , Overflow-y , зажим , дисплей

Обнаружили проблему с содержанием этой страницы?

  • Отредактируйте страницу на GitHub.
  • Сообщить о проблеме с содержимым.
  • Посмотреть исходный код на GitHub.
Хотите принять более активное участие?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена участниками MDN.

Переполнение: скрыто | Webflow University

Домашний урок

Все уроки

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

layout-design

В этом видео старый пользовательский интерфейс. Скоро будет обновленная версия!

Иногда элементы на странице могут существовать за пределами области просмотра, и непреднамеренным побочным эффектом может быть горизонтальная или боковая прокрутка, которая показывает дополнительные пробелы вокруг вашего дизайна. Не всякая горизонтальная прокрутка — это плохо, но если она не работает с вашим дизайном, мы расскажем, как остановить ее с помощью Overflow: скрытый, отзывчивый дизайн и продуманная настройка взаимодействия.

В этом уроке вы узнаете:

  1. Почему происходит переполнение
  2. Как обнаружить переполнение
  3. Как устранить проблемы с переполнением

Почему происходит переполнение

Многие вещи могут вызвать нежелательную горизонтальную прокрутку в вашем дизайне, но обычно это вызвано одной из двух причин: 

  • В дизайн-макете есть элемент, размер или положение которого выталкивают его за пределы экрана и за пределы области просмотра.
  • Взаимодействие или анимация, которые начинаются за кадром. Например, у вас есть Заголовок, залетающий сбоку. Когда страница загружается, начальное положение заголовка может быть за пределами экрана. Несмотря на то, что заголовок оказывается в нужном месте после завершения анимации, его исходное положение приводит к переполнению страницы.
Элемент расположен таким образом, что он выталкивается за пределы экрана и за пределы области просмотра, что вызывает переполнение. Исходное положение заголовка с примененным к нему взаимодействием запускает заголовок за пределы экрана и вызывает переполнение.

Нежелательная горизонтальная прокрутка может быть вызвана другим сценарием, чем упомянутые выше 2, но чаще всего проявляется переполнение, связанное с макетом и анимацией.

Как обнаружить переполнение

Горизонтальная прокрутка — это не всегда плохо. Однако при тестировании нежелательной горизонтальной прокрутки обращайте внимание на все, что заставляет ваш макет выглядеть или ощущаться так, как будто граница (обычно правая сторона вашего дизайна) не работает так, как вам хотелось бы. Другими словами, при прокрутке ищите дополнительное пространство или элементы, свисающие с края вашего дизайна. Вы можете проверить это в Конструктор и опубликованный сайт .

Чтобы определить в Designer наличие нежелательной горизонтальной прокрутки в проекте:

  1. Откройте Designer
  2. Прокрутка влево и вправо 900 06, чтобы увидеть, не выходят ли какие-либо элементы за пределы области просмотра 
  3. Захватить края холста Designer
  4. Измените размер холста , чтобы проверить отзывчивость и плавность
Примечание: Если вы используете трекпад или мобильное устройство, прокручивайте влево и вправо, но если вы используете колесико мыши, вы обычно можете удерживать нажатой Shift для прокрутки влево и вправо.
Вы можете взяться за край холста, чтобы изменить его размер и проверить отзывчивость и плавность.

Узнайте больше о том, как сделать дизайн адаптивным.

‍

Чтобы обнаружить нежелательное переполнение на вашем опубликованном сайте (особенно если у вас есть взаимодействия):

  1. Публикация вашего сайта
  2. Проверьте, не вызывают ли ваши взаимодействия нежелательные пробелы справа от вашего дизайна (особенно на мобильных устройствах)
Взаимодействие часто вызывает появление нежелательных пробелов, особенно на мобильных устройствах.

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

Как исправить проблемы с переполнением

Горизонтальную прокрутку можно остановить несколькими способами:

  1. Использовать Переполнение: скрыто
  2. Проанализируйте макет и его адаптивность
  3. Обратите внимание на конфигурацию взаимодействия
  4. Использование альтернативные исправления
  5. Установить переполнение: скрыто на всей странице

Использовать переполнение: скрыто

Установить для родительского элемента Overflow значение hidden : 

  1. Найдите элемент , вызывающий нежелательную горизонтальную прокрутку (например, элемент изображения). 06  
  2. Установить Переполнение От до hidden
  3. Прокрутите влево и вправо , чтобы проверить, удалила ли это нежелательную горизонтальную прокрутку

При установке Переполнение 9От 0006 до hidden означает, что вы скрываете элементы, выходящие за границы родительского элемента.

Любой элемент, выходящий за границы родительского элемента (изображенный в виде темного прямоугольника вокруг содержимого страницы), больше не отображается после установки для родительского элемента значения Overflow: hidden.
Примечание: Позиция: липкая не будет работать, если для каких-либо родительских элементов установлено значение Переполнение: скрыто.

Подумайте о своем макете и о том, является ли он адаптивным

При создании макета всегда лучше использовать адаптивный дизайн. Однако дизайн может быть размещен с идеальной шириной в пикселях на одном конкретном дисплее (как правило, на дисплее дизайнера). Это может привести к непреднамеренному переполнению содержимого при просмотре дизайна с использованием других размеров области просмотра.

Чтобы проверить адаптивный дизайн:  

  1. Нажмите значок предварительного просмотра в Designer (например, нажмите значок «глаз») 
  2. Возьмитесь за край 90 003 Дизайнер холст
  3. Измените размер холста , чтобы проверить отзывчивость и плавность при различной ширине окна просмотра
  4. Щелкните значок на рабочем столе , чтобы вернуться к точке останова на рабочем столе, и щелкните значок для предварительного просмотра , чтобы выйти из режима предварительного просмотра
Возьмитесь за край холста конструктора, чтобы изменить его размер и проверить скорость отклика и плавность при различной ширине области просмотра.

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

  1. Нажмите на размеры холста в верхней части конструктора, чтобы открыть Настройки холста
  2. Введите точную ширину экрана размер, который вы хотите просмотреть (например, 2000 пикселей), и нажмите клавишу «Ввод» на клавиатуре 
  3. Нажмите любую из кнопок точки останова , чтобы выйти из режима предварительного просмотра на большом экране.

Узнайте больше о том, как сделать дизайн адаптивным.

Обратите внимание на конфигурацию вашего взаимодействия

Допустим, у вас есть Заголовок с установленным взаимодействием. Заголовок оказывается в правильном месте после завершения взаимодействия, но его исходное положение находится за пределами страницы. Поскольку Заголовок начинается за пределами страницы, это начальное положение приводит к тому, что страница застревает в этом макете и вызывает нежелательную горизонтальную прокрутку.

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

  1. Выберите родительский элемент заголовка (например, «контейнер Hero» Блок Div )
  2. Установите 90 003 Разделение блоков Переполнение to hidden

Это приводит к тому, что блок Div делает то, что вы ему сказали — он скрывает все, что нависает над его границей. Однако это приводит к тому, что ваша анимация обрезается.

Взаимодействие обрезается, потому что для неправильного родительского элемента установлено значение Overflow: hidden. Исправьте это, установив Overflow: hidden для следующего вышестоящего элемента в иерархии элементов.

Чтобы убедиться, что анимация по-прежнему работает так, как вы предполагали, вы можете удалить Overflow: hidden в блоке Div и вместо этого установить Overflow: hidden в следующем родительском элементе вверху в иерархии элементов — Section :

  1. Выберите Заголовок родительский элемент (например, «Hero container» Div block )
  2. Установите Div block Overflow на visible
  3. Выберите следующего родительского элемента в иерархии (например, «He раздел «ро»)
  4. Установите для раздела Overflow значение hidden

Теперь анимация работает должным образом, и ваши элементы больше не переполняются.

Используйте альтернативные исправления

Вы также можете попробовать следующие исправления: 

  • Использование ширины в процентах и ​​максимальной ширины для предотвращения переполнения (например, 100 % для родительских элементов и 100 % или меньше для дочерних элементов)
  • Использование фоновых изображений для разделов вместо встроенных элементов изображения (например, если изображение декоративный и должен отображаться за текстом или другим содержимым, используйте фоновое изображение)
  • Использование режима рентгена для более легкого просмотра границ ваших элементов, вызывающих переполнение (вы можете переключать режим рентгена в настройках холста)
  • Прокрутка вашего сайта в Конструкторе с наведением курсора на дополнительный пробел справа для определения элементов, вызывающих переполнение

Узнайте больше о минимальных и максимальных размерах и фоновых изображениях.

Установить переполнение: скрыто на всей странице

Вы можете задаться вопросом, можно ли установить для самого верхнего элемента Overflow значение hidden — элемент Body .

No related posts.