@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%;
}


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

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

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

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

Войти через центр авторизации
Похожие вопросы