I am doing some calculations with $(window).scrollTop();, element.innerHeight();, $(window).height();, element.offset().top;. And i've noticed that the result is different on mobile devices due to the toolbar from chrome and safari. My question is do any of those values change when the toolbar collapses and what can i do against it.
Asked
Active
Viewed 65 times
1
Kiri
- 11
- 3
1 Answers
1
I had the same issue in the past, and solved it by setting the position as fixed for the body. Maybe that will help you as well.
html {
overflow: hidden;
width: 100%;
}
body {
height: 100%;
position: fixed;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
I found a very similar question here, also there is a jQuery.documentSize solution on github which detects the real width and height of the document.
la_petite_kozel
- 826
- 5
- 26
-
Didn't really work for me. – Kiri Sep 29 '22 at 18:46
-
@Kiri Try that way: `body { min-height: 100vh; min-height: -webkit-fill-available; } html { height: -webkit-fill-available; }` – la_petite_kozel Sep 30 '22 at 09:05
-
Also please check the following [answer](https://stackoverflow.com/a/31655549/13199446) that might be a solution – la_petite_kozel Sep 30 '22 at 09:11