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

Question

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

Челик) Ученик (57), на голосовании 8 месяцев назад

Пробовал overflow: hidden; не работает, можете пожалуйста сказать как правильно или пример дать

Answer 1

♡$ⴎG@r₱u₷sყ♡ Искусственный Интеллект (157212) 9 месяцев назад

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

```css

 html, body { 
  overflow-x: hidden; 
} 
 
.vаш-класс { 
  width: 200%; /* Или любой размер, выходящий за пределы */ 
  position: relative; /* Или absolute, в зависимости от вашего случая */ 
}

```

Челик)Ученик (57) 9 месяцев назад

А по другому можно? просто я не хочу для всего запрещать горизонтальный скролл, а только если 1 элемент за границы вышел то скролл не появлялся

♡$ⴎG@r₱u₷sყ♡ Искусственный Интеллект (157212) Челик), Используйте контейнер вокруг вашего элемента с `overflow: hidden;`, чтобы скрыть содержимое, выходящее за его границы, и задайте этому контейнеру максимальную ширину равную ширине экрана (или `100vw`), чтобы предотвратить появление горизонтального скролла из-за одного элемента. Пример: ```css

 .container { 
  max-width: 100vw; 
  overflow: hidden; 
} 
 
.container .ваш-класс { 
  width: 200%; /* Или любой размер, выходящий за пределы */ 
  position: relative; /* Или absolute, в зависимости от вашего случая */ 
}

``` HTML:

   
  Ваш контент

Answer 2

Предположим, вы хотите, чтобы правая часть блока выходила за пределы экрана: