Почему при закрытии меню сайта сохраняется пространство справа от контента(если поскроллить)?

Question

[Islam Ibakaev]

Сверстал недавно простенький макет. У сайта есть off-canvas push menu, которое изначально помещено влево на ширину экрана. При клике на иконку открытия меню, весь контент сайта уходит вправо на ширину экрана, тем самым, отображая меню для пользователя. Проблема в том, что при нажатии на иконку закрытия меню, всю возвращается в исходное положение(как и предполагается), однако сайт почему-то прокручивается вправо. Можете помочь понять почему так происходит?

p.s. это можно обнаружить при просмотре сайта на смартфоне

https://github.com/dagman/jwoodtemplate
jwoodtemplate.surge.sh

Answer 1

[alex]

Поставьте для #wrapper { overflow: hidden }, а во время открытия меню - убирайте.
Проблема в том, что у вас элементы с атрибутами data-aos-*, которые анимируются при скроле, в дефолтном состоянии находятся за вьюпортом, в результате чего появляется горизонтальная прокрутка.

Comments

[Islam Ibakaev]

я у body ставил overflow-x: hidden; Почему этого недостаточно? По идее мне нужен скролл по вертикали. Можно ли как-нибудь по-другому?

[Полина Емельянова]

Islam Ibakaev: у вас есть враппер, на нем и должен быть хидден.
Мобильное меню - прибивайте к верху любым способом: абсолютом, фиксед - не важно.
Высота - 100% или 100vh. На врапере - релатив и хидден. Прокрутки быть не должно. Если у вас нет конфликта стилей в скриптах, конечно.

Меня этот способ еще не подводил.

[Islam Ibakaev]

была такая идея, но не хотелось делать mobile-menu фиксированным, выходит что придётся. спасибо)