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

Question

Хасан

фронтенд , html , веб-разработка , javascript , css

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

Как правильно использовать свойство overflow: hidden;? Можете привести пример или объяснить, как это работает?

12 февраля 2024 г. 16:19

Ответы на вопрос 2

Похожие вопросы

Answer 1

Свойство `overflow: hidden;` в CSS используется для того, чтобы обрезать содержимое, которое выходит за границы родительского блока, и не отображать полосы прокрутки.

Если вы хотите, чтобы блок выходил за границы экрана, но при этом не возникал горизонтальный скролл, вам нужно задать свойство `overflow: hidden;` для родительского элемента, который обычно является элементом `body` или `html`. Вот пример разметки и стилей для этого:

HTML:
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Пример</title>
<style>
  html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Скрываем горизонтальный скролл для всего документа */
  }

  .out-of-bounds {
    width: 150%; /* Ширина больше ширины экрана */
    height: 200px; /* Просто пример высоты */
    background-color: rebeccapurple; /* Цвет фона для визуализации */
    position: relative; /* Относительное позиционирование */
    left: -25%; /* Смещаем блок влево */
  }
</style>
</head>
<body>

<div class="out-of-bounds">
  <!-- Содержимое блока, которое выходит за пределы -->
</div>

</body>
</html>
```

CSS:
```css
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Скрывает горизонтальный скролл */
}

.out-of-bounds {
  width: 150%; /* Ширина блока больше 100%, чтобы выйти за пределы экрана */
  height: 200px; /* Просто задаем высоту для наглядности */
  background-color: rebeccapurple; /* Цвет фона */
  position: relative; /* Относительное позиционирование */
  left: -25%; /* Смещаем блок влево относительно его обычного положения */
}
```

В этом примере горизонтальный скролл на странице отключен с помощью `overflow-x: hidden;`. Широкий блок `.out-of-bounds` со смещением влево на `25%` выходит за границы экрана, но пользователь не видит, что содержимое выходит за пределы и не может его прокрутить.

Стоит отметить, что использование `overflow: hidden;` для `body` может повлиять на доступность страницы и на предотвращение пользовательской прокрутки для частей страницы, которые должны быть доступны. Применяйте этот подход в тех случаях, когда вы точно знаете, что хотите достичь и как это повлияет на доступ к содержимому.

Answer 2

body {
  overflow-x: hidden;
}