Содержание

html — Убрать горизонтальный скролл

Задать вопрос

Вопрос задан

Изменён 4 года 4 месяца назад

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

Учусь верстать макет, графика выходит за пределы 1000px. Желательно сделать так, что бы на мониторе с разрешением экрана 1024x768px не появлялся горизонатальный скролл, а то, что не влезло, просто оставалось за пределами браузера. Как этого добиться?

  • html
  • css

Добавляем к блоку в котором нужно убрать скролл стиль (в CSS или напрямую)

overflow:hidden;
overflow-y:hidden;  /*для вертикального*/
overflow-x:hidden;  /*для горизонтального*/
<body>

  • overflow

  • overflow x

  • overflow y

1

Всё очень просто пишем:

html{
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}
  body
  {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

#wrapper { width: 980px; overflow: show; }

Обычно такого хватает. #wrapper — обертка всего сайта, обычно идет следом за body

1

А ещё для IE<8 чтобы убрать прокрутку ничего кроме:

<body scroll="no">

не помжет!

контейнеру, в который не влазит контент добавить свойство overflow:hidden; это скроет непомещающиеся части.

если я правильно понял, то одно из свойств CSS вам должно помочь position: absolute. А также можно поиграться вот с этими свойствами max-width и min-width. Можно еще попробовать обернуть картинку в DIV и этому же DIV`у задать background, и указать размеры картинки которая задана фоном.

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

Регистрация через 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.

Переполнение — Tailwind CSS

​Основы использования

​Отображение содержимого, которое выходит за пределы

Используйте overflow-visible, чтобы предотвратить обрезку содержимого внутри элемента. Обратите внимание, что любое содержимое, выходящее за границы элемента, будет тогда видимым.

Andrew Alfred Technical advisor

<div></div>

​Скрытие переполняющегося содержимого

Используйте overflow-hidden, чтобы вырезать любое содержимое внутри элемента, выходящее за границы этого элемента.

Andrew Alfred Technical advisor

<div></div>

​Прокрутка при необходимости

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

Andrew Alfred Technical advisor

Debra Houston Analyst

Jane White Director, Marketing

Ray Flint Technical Advisor

<div></div>

​Скролл по горизонтали при необходимости

Используйте overflow-x-auto, чтобы разрешить горизонтальную прокрутку, если это необходимо.

Andrew

Emily

Whitney

David

Kristin

Sarah

<div></div>

​Скролл по вертикали при необходимости

Используйте overflow-y-auto, чтобы разрешить вертикальную прокрутку, если это необходимо.

Andrew Alfred Technical advisor

Debra Houston Analyst

Jane White Director, Marketing

Ray Flint Technical Advisor

<div></div>

​Скролл по горизонтали всегда

Используйте overflow-x-scroll, чтобы разрешить горизонтальную прокрутку и всегда показывать полосы прокрутки, если операционная система не отключила всегда видимые полосы прокрутки.

<div></div>

​Скролл по вертикали всегда

Используйте overflow-y-scroll, чтобы разрешить вертикальную прокрутку и всегда показывать полосы прокрутки, если операционная система не отключила всегда видимые полосы прокрутки.

<div></div>

​Скролл во всех направлениях

Используйте overflow-scroll, чтобы добавить полосы прокрутки к элементу. В отличие от overflow-auto, которая показывает полосы прокрутки только в случае необходимости, эта утилита показывает их всегда. Обратите внимание, что некоторые операционные системы (например, macOS) скрывают ненужные полосы прокрутки независимо от этого параметра.

<div></div>

​Применяя условно

​Наведение, фокус и другие состояния

Tailwind позволяет условно применять служебные классы в разных состояниях с помощью модификаторов вариантов. Например, используйте hover:overflow-scroll, чтобы применять утилиту overflow-scroll только при hover.

<div>
  <!-- ... -->
</div>

Полный список всех доступных модификаторов состояния смотрите в документации Наведение, фокус и другие состояния.

​Контрольные точки и медиа-запросы

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

md:overflow-scroll, чтобы применить утилиту overflow-scroll только на экранах среднего размера и выше.

<div>
  <!-- ... -->
</div>

Чтобы узнать больше, ознакомьтесь с документацией по адаптивному дизайну, темному режиму и другим модификаторам медиазапросов.

html — CSS скрывает полосу прокрутки, но позволяет прокручивать элемент

спросил

Изменено 8 месяцев назад

Просмотрено 255 тысяч раз

У меня есть этот элемент, называемый элементами, и содержимое внутри элемента длиннее чем высота элемента, я хочу сделать его прокручиваемым, но скрыть полосу прокрутки, как бы я это сделал?

 <дел>
    <дел
     
     
    >