There is a sidebar. There is no smooth scrolling + body is spinning under it. How to fix?

P

Pitman772019-08-23 01:18:34

css

Pitman77, 2019-08-23 01:18:34

Welcome all! I ran into such a problem - there is a sidebar that slides out on top of the body at 100% width:

.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;
}

What happens on the phone after opening:

1. There is no smooth scrolling. You move your finger across the screen - the body of the sidebar scrolls. If you swipe up sharply, the sidebar scrolls only until you lift your finger from the screen.

2. When the body of the sidebar ends and you drag it further, the body starts scrolling under the sidebar. Because of this, it is not possible to scroll the body of the sidebar up while the body below it is scrolling down.

I did not find a clear solution on the Internet. I found advice on stackoverflow, following it when opening the sidebar, I hung the class on the body . body_fixed

<body class="body_fixed">

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

But this didn't solve the problem. Has anyone else experienced something similar and can share their experience?
Thank you!

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

R

Rustam Bainazarov, 2019-08-23
@Pitman77

According to the description, this is clearly iOS Safari.
Add this to your sidebar:
Then there will be inertial scrolling like on body. Unfortunately, this thing has bugs (especially in combination with fixed: jumps, blinking, unwanted dragging of elements), but Apple does not give other solutions.