White space on top and bottom when scrolling on mobile

Question

I'm making a new website where I want my navbar fixed top when scrolling. It works, but on mobile there is white space on top or bottom when we scroll. The problem is than I have a nav coming from left side on mobile. This nav doesn't moove when I scroll, no the top navbar go under the left navbar and its really ugly.

Here is my website if you don't understand https://www.hytalefrance.net

I've tried something like this:

overscroll-behavior: none;

But It change nothing

body {
  height: 100%;
  overflow: auto;
}

Do nothing to

It's a classic bootstrap 4 navbar, but I don't use fixed-top class to make it fixed, it's a custom class similar to fixed-top

.sticky.is-sticky {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1000;

}

I would like the whitespace on mobile disappears.

Some screenshot taken on my mobile (iPhone 6)

I'm actually scrolling down:

When nav is open:

When I scroll with nav open:

Maybe is even a device-related bug, on Android 9 it's working... Or maybe you're talking about the 20px margin-top your ".main" class have? — Dimas Pante, Apr 01 '19 at 13:02
I added screenshots. It's visible only on mobile and not in the navigator developpement tool — , Apr 01 '19 at 13:03
add to body {overflow:hidden;} to check if this is the problem — godfather, Apr 01 '19 at 13:06
@godfather I've tried, overflow hidden on body make scrolling impossible — , Apr 01 '19 at 13:09
samsung s9 but i have a question what is this div sticky-wrapper — godfather, Apr 01 '19 at 13:17
@godfather I don't know, I think It come from my js file to make the nav fixed when user scroll. The problem disapear if the navbar is fixed with fixed-top bootstrap class. I'll try to remove the custom fixed top class and edit my js to add bootstrap class — , Apr 01 '19 at 13:19
Yeah it come from my js var stickyWrapper = $('
').addClass('sticky-wrapper'); This is not my own function but comment say "to maintain actual top offset on page". I'll do my own function — , Apr 01 '19 at 13:21

score 0 · Answer 1 · answered Apr 01 '19 at 13:46

I guess you're taking about inertial scroll behavior caused by over scrolling a webpage in iPhone. There is no ideal fix for this problem.

There're few partial solutions that may / maynot work in your case
- How to disable inertial scrolling on body for iOS browsers?
- ipad safari: disable scrolling, and bounce effect?

Though, It is not recommended to prevent it. Doing so will intercept natural scroll smoothness in browser.

I'd suggest you to set your body's background color to the exact bg color of your nav bar to make it less obvious

score 0 · Accepted Answer · answered Apr 01 '19 at 14:29

0

I fixed the problem by removing my js function. On desktop navbar will not be fixed, on mobile the navbar is now directly fixed, and it works

answered Apr 01 '19 at 14:29

White space on top and bottom when scrolling on mobile

2 Answers2