Отрицательное абсолютное позиционирование, удаление полосы прокрутки

Question

Я работаю на этом сайте: http://waterwing.waterwing.ca/

Идеально подходит анимация в верхнем правом углу, за исключением того, что она создает горизонтальную полосу прокрутки в соответствии с тем, как она расположена.

Это абсолютно позиционировано -120px сверху и справа. Мне просто интересно, как я могу сделать это так, чтобы оно не расширяло тело и просто скрывало себя, как только оно достигнет края страницы, чтобы не было полосы прокрутки.

Кажется, что полосы прокрутки нет в Windows Firefox, но есть в Mac Firefox и Safari.

Спасибо, Wade

Answer 1

Оберните #corner в другом элементе div и установите для него размер, занимаемый конечной точкой анимации, а также абсолютное положение. установите переполнение для этого div на скрытый, чтобы он не кровоточил со страницы и не вызывал прокрутку.

Answer 2

Вы также можете просто нанести overflow: hidden на тело, работает таким же образом и экономит вам div

Answer 3

В зависимости от вашей ситуации, но вы можете получить полосы прокрутки для div или для всей страницы. При создании адаптивного макета сайта я всегда пишу этот CSS:

body {
    overflow-x: hidden;
}

И это предотвращает появление полос прокрутки, кросс-браузер и кросс-устройства.