Как сделать чтобы фон сайта не прокручивался


Низкий FPS при прокрутке страницы. Решение проблемы background-attachment: fixed / Хабр

Решил я тут недавно на одном из своих сайтов сделать легкий редизайн. И дошло дело до фона. Показался он мне каким-то скучным. Захотелось его немного «оживить». Подобрал подходящую картинку небольшого размера, загнал ее в свойство фона:
body{ background: url("../images/bg.jpg") no-repeat center center / cover fixed; } 

и довольный нажал F5. Красота, да и только!

Начал скроллить страничку вниз и чувствую, что-то не то…

Такое чувство, как будто я играю в Crysis на очень старом компьютере. Почему же на сайте начались «тормоза» и прокрутка проходит рывками?

Я начал свое расследование…

Сначала я погрешил на свойство cover, но дело оказалось не в нем. Отключив фиксированное положение фона (убрав fixed), мой «Crysis» выдал мне больше 30 FPS! «Во дела...», подумал я. Как же так? Почему? Почему я не замечал этого раньше? Возможно, это не очень заметно на легковесных сайтах, где не так много html элементов.

А дело оказалось вот в чем. Использование background-attachment : fixed каждый раз при прокрутке вызывает операцию перерисовки. Страница должна переместить свое содержимое. И когда дело доходит до фиксированного фона, браузер должен заново прорисовать картинку в новом месте, относительно существующих DOM-элементов.

Чтобы решить эту проблему, нашему фоновому изображению нужен свой элемент, чтобы оно могло двигаться независимо от других. А также нам понадобится CSS3-свойство will-change. О нем речь пойдет ниже.

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

Давайте я покажу все на примере.

Это наш изначальный код (я развернул свойства для наглядности):

body{ background: url("../images/bg.jpg") no-repeat center center; background-attachment: fixed; background-size: cover; } 

А вот, что нам необходимо сделать для решения проблемы:

body{ position: relative; } body::before { background: url("../images/bg.jpg") no-repeat center center; background-size: cover; content: ' '; height: 100%; left: 0; position: fixed; top: 0; width: 100%; will-change: transform; z-index: -1; } 

Мы добавили position: relative для элемента body, чтобы затем спозиционировать псевдо-элемент, который будет отдельным слоем для нашего фона. Остальные свойства, касательно фона, мы перенесли в ::before. У псевдо-элемента мы теперь используем position : fixed, вместо прежнего background-attachment: fixed у body. Ну и самое важное, без чего вся затея потерпит крах, — это свойство will-change.

Свойство will-change предписывает браузеру отображать элемент, независимо от окружающих его других элементов. Оно как бы говорит браузеру: «Эй, друг, этот элемент изменится когда-нибудь потом, в будущем, так что прорисуй его только один раз на его собственном слое. И не нужно учитывать остальные элементы — он сам по себе».

Такие вот дела.

Данный билд я протестировал в разных браузерах, и вот небольшое резюме:

  1. Google Chrome. Все ОК, работает как часы.
  2. Mozilla Firefox. Все ОК, работает как часы.
  3. Opera. Все ОК, работает как часы.
  4. Safari. Все ОК, работает как часы. За проверку спасибо smssystem
  5. Microsoft Edge. Метод работает, но есть один косяк. Если крутить колесиком, то дергается верх и низ страницы, но потом приходят в норму. Если же крутить с помощью скроллбара, то все ОК.
  6. Internet Explorer. Та же проблема, что и у Edge.

html - Как сделать так, чтобы фоновое изображение прокручивалось и не отображалось на странице?

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
.

Как скрыть полосы прокрутки с помощью CSS


Узнайте, как скрыть полосы прокрутки с помощью CSS.


Как скрыть полосы прокрутки

Добавить переполнение: скрыто; , чтобы скрыть как горизонтальная и вертикальная полоса прокрутки.

Чтобы скрыть только вертикальную полосу прокрутки или только горизонтальную полосу прокрутки, используйте overflow-y или overflow-x :

Пример

body {
overflow-y: скрыто; / * Скрыть вертикальную полосу прокрутки * /
переполнение-x: скрыто; / * Скрыть горизонтальную полосу прокрутки * /
}

Попробуй сам "

Обратите внимание, что overflow: hidden также удалит функциональность полосы прокрутки.Прокрутка внутри страницы невозможна.

Совет: Чтобы узнать больше о свойстве overflow , перейдите в нашу справку по свойствам CSS overflow.


Скрыть полосы прокрутки, но сохранить функциональность

Чтобы скрыть полосы прокрутки, но по-прежнему иметь возможность прокрутки, вы можете использовать следующий код:

Пример

/ * Скрыть полосу прокрутки для Chrome, Safari и Opera * /
.example :: - webkit-scrollbar {
display: none;
}

/ * Скрыть полосу прокрутки для IE, Edge и Firefox * /
.пример {
-ms-overflow-style: нет; / * IE и Edge * /
ширина полосы прокрутки: нет; / * Firefox * /
}

Попробуй сам " Браузеры

Webkit, такие как Chrome, Safari и Opera, поддерживают нестандартный псевдоэлемент :: - webkit-scrollbar , который позволяет нам изменять внешний вид полосы прокрутки браузера. IE и Edge поддерживают свойство -ms-overflow-style: , а Firefox поддерживает свойство scrollbar-width , которое позволяет нам скрыть полосу прокрутки, но сохранить функциональность.



.

html - Почему background-attachment: scroll не работает?

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
.

javascript - Как сделать лайтбокс прокруткой, но не фон

Переполнение стека
  1. Около
  2. Товары
  3. Для команд
  1. Переполнение стека Общественные вопросы и ответы
  2. Переполнение стека для команд Где разработчики и технологи делятся частными знаниями с коллегами
  3. Вакансии Программирование и связанные с ним технические возможности карьерного роста
  4. Талант Нанимайте технических специалистов и создавайте свой бренд работодателя
.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий