In the mobile version of my portfolio website, the bottom content gets hidden on every panel when the address bar is visible.
In the above screenshot, there are some elements at the bottom that are hidden, as seen in the screenshot below.
I tried the following bit of code, as suggested here:
window.addEventListener("load",function() {
setTimeout(function(){
window.scrollTo(0, 1);
}, 0);
});
This will automatically scroll after the page loads so that the address bar becomes hidden. However, to achieve the panel mechanism I had to disable scrolling on the web page, so the above snippet does not work.
But if scrolling is disabled, then why does moving my finger upward on google chrome hides the address bar? What can I do to ensure the bottom content is not cut off? If anyone wants to see the full source code, it is on github
FYI, the height of every panel is 100vh, and its width is 100vw.
Thank you so much in advance! :)
