@Pitman77

Есть сайдбар. Нет плавности прокрутки + под ним крутится body. Как исправить?

Приветствую всех! Столкнулся с такой проблемой - есть сайдбар, который выезжает поверх body на 100% ширины:

.fullwidth_sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 120;
  top: 0;
  left: 0;
  color: #fff;
  background-color: #303030;
  overflow-x: hidden;
  transition: 0.15s;
}


Что происходит на телефоне после открытия:

1. Нет плавности прокрутки. Ведешь пальцем по экрану - тело сайдбара прокручивается. Если резко смахнуть вверх - сайдбар прокручивается только до момента пока не оторвешь палец от экрана.

2. Когда тело сайдбара заканчивается и дальше тянешь его, то начинает прокручиваться body под сайдбаром. Из-за этого невозможно прокрутить тело сайдбара вверх пока под ним body крутится вниз.

Внятного решения в интернете не нашел. На stackoverflow нашел совет, следуя ему при открытии сайдбара повесил на body класс . body_fixed

<body class="body_fixed">

.body_fixed {
    position: fixed;
    top: 0px;
    width:  100%;
    height: 100%;
}


Но это проблемы не решило. Может кто-то сталкивался с подобным и поделитесь опытом?
Спасибо!
  • Вопрос задан
  • 61 просмотр
Решения вопроса 1
SmthTo
@SmthTo Куратор тега CSS
Все перепёлки мира будут оплакивать мою смерть.
По описанию это явно iOS Safari.

Добавьте это в ваш сайдбар:
-webkit-overflow-scrolling: touch;

Тогда будет инерционная прокрутка, как на body. К сожалению, у этой штуки есть баги (особенно в сочетании с fixed: скачки, мигания, нежелательные оттягивания элементов), но иных решений Apple не даёт.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
19 апр. 2024, в 03:52
1000 руб./за проект
19 апр. 2024, в 03:01
1000 руб./за проект
18 апр. 2024, в 21:56
2000 руб./за проект