CSS-hide элемент справа от экрана

У меня есть div, который я хочу частично разместить вне экрана:

div{
    position: absolute;
    height: 100px;
    width: 100px;
    right: -50px;
    top: 50px;
}

Но это увеличивает размер страницы, позволяя ее прокручивать вправо. Есть ли способ сохранить половину этого div скрытым и предотвратить прокрутку, чтобы просмотреть его?

Ответы

Ответ 1

Да, просто создайте закрывающий div с overflow: hidden, например:

.outer {
  overflow: hidden;
  position: relative;
}
.inner {
  position: absolute;
  height: 100px;
  width: 100px;
  right: -50px;
  top: 50px;
}

<div class="outer">
  <div class="inner">
    CONTENT
  </div>
</div>

Ответ 2

Просто добавьте overflow:hidden в css. Это должно сделать трюк.

Ответ 3

Просто вставьте этот div внутри другого div с помощью overflow:hidden

Ответ 4

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

@media (min-width: 960px) {
    body {
       overflow-x: hidden;
    }
}

Должен работать для современных браузеров.

Ответ 5

Другим решением является использование margin-left: 100%;

И если вы хотите немного поиграть с позиционированием, вы можете сделать что-то вроде margin-left: calc(100% + 10px);

И еще один альтернативный способ - сделать float: right;, а затем поиграть с margin-right -50px;, где 50px - это ширина скрытого div. У вас может даже быть аккуратный переход, если вы анимируете margin-right, если вы делаете меню.

Ответ 6

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

Вот код, который я использовал:

@media screen and (max-width: 1275px) {
  #header {
     overflow-x: hidden;
  }
}

Ответ 7

Прокрутка, возможно, вы разместили относительное свойство позиции для содержащего div, и это приведет к тому, что требуемый div будет отключен справа на -50, но по отношению к основному содержащему div, а не к области просмотра браузера.. если его родительский div только внутри тега body или родительский div не включает какое-либо свойство позиции, которое ваш код должен работать.. и снова вы можете применить переполнение: скрытое свойство для оболочки div, чтобы укрыть ненужную часть