Авторский проект IT-специалиста Олега Барабанова Персональные публикации на тему IT и не только…

Одна из причин, почему на body элементе не стоит отключать скролл

До сих пор есть немало причин, когда в верстке необходимо убирать скролл непосредственно на body, например, при необходимости фиксирования высоты body по высоте экрана, а скролл всего контента возлагается на вложенный элемент-контейнер, который обычно соответствует 100% высоты от body (с помощью флексов или др.). При этом непосредственно у body отключают скролл (напомню - его заменяет внутренний скролл у вложенного элемента).

Эта практика используется нередко, но недавно я обнаружил досадный недостаток подобного отключения скролла.

Неочевидная проблема с запретом скролла у корневого элемента body

На своем телефоне с Android, я часто пользуюсь браузером Opera. У них есть немало плюшек и не так давно (начиная вроде как с 50-ой версии), у них появилась очень удобная "рукоятка" прокрутки, которая появляется сразу при скроллинге, которую разработчики анонсировали в своем блоге.

Штука оказалась очень удобной, т.к. позволяет очень быстро скроллить на нужную позицию и при этом не мешается, т.к. при неактивности эта "рукоятка" исчезает. Для людей, у которых большие пальцы и нужно точно скроллить - это хороший помощник.

В начале статьи был представлен пример, в котором описывалась необходимость, чтобы высота body соответствовала не высоте содержимого, а высоте экрана, а скроллинг контента переносился на вложенный элемент.

И сожалению, как выяснилось на практике, фишка со скроллом у Opera опирается именно на скролл, который на body и на данный момент, обходного решения у этой проблемы нет. Поэтому приходится выбирать:

  1. либо оставлять скролл на body и делать свое решение другими способами;
  2. либо оставить верстку и отключив скролл - отключить "рукоятку" в Opera.

Я честно говоря советую не отключать скролл у body, поскольку не только Opera, но и другие браузеры (или их плагины) могут полагаться на скролл корневого элемента.

Заключение

Данная статья была создана для предупреждения такой неочевидной проблемы и лучше знать о такой особенности заранее при проектировании, чем потом перестраивать верстку с корня элемента и тем самым сэкономить себе время и нервы на будущее.