Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mosik4

Prevent address bar from hiding on mobile / Scroll Trigger

Recommended Posts

Hi,

I am trying to get my website to work smoothly with Scroll Trigger. But the address bar is continuously hiding and showing when I am scrolling through the page which destroys the user experience. I tried searching for solutions but to no avail - might be my lack of knowledge of css. 

Here is my website (try it on mobile to understand what I mean):
https://tbdalen.github.io/

And here is my repo:
https://github.com/tbdalen/tbdalen.github.io

Here is my inspiration for this site and they managed to prevent hiding the address bar. They have used hammerjs here though:
https://dpotferstudio.com/

Link to comment
Share on other sites

1 hour ago, mosik4 said:

the address bar is continuously hiding and showing when I am scrolling through the page which destroys the user experience.

What's the issue with this? I don't feel like it destroys the user experience.

 

In order to do this, you'll need to not use the normal document scrolling. I recommend trying to get the body to scroll instead:

html {
  overflow: hidden;
}

body {
  width: 100%;
  height: 100%;
  position: fixed;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

Then in the ScrollTrigger you set the scroller to the body:

scroller: document.body

Demo:

See the Pen KKVKQVE by GreenSock (@GreenSock) on CodePen

  • Like 2
Link to comment
Share on other sites

Thank you for your reply Zach. I still can't figure it out on my website though. I think I am struggling because of the type of fixed 100vh effect that I am after. I have a fixed div inside of the fixed body. And css grid inside of the fixed div. What am I missing here?
 

Quote

What's the issue with this? I don't feel like it destroys the user experience.

I was too harsh on my phrasing here. Since I am going for that 100vh feel I dont want to have the address bar going in and resizing my container.  

Link to comment
Share on other sites

2 hours ago, mosik4 said:

I am struggling because of the type of fixed 100vh effect that I am after. I have a fixed div inside of the fixed body. And css grid inside of the fixed div. What am I missing here?

What exactly is going wrong? Can you please make a minimal demo using CodePen?

  • Like 1
Link to comment
Share on other sites

Thank you for your replies. I think you are correct Zach. I can not lock the address bar and use ScrollTrigger. 

Locking down the address bar requires overflow to always be hidden. And you have to have overflow on scroll or auto at some point in order to scroll with ScrollTrigger. Dpotferstudio manages to do this because hammerjs does not have these same requirements as its not based on scrolling and can work with overflow hidden.  
http://dpotferstudio.com/

This is atleast my theory here. Correct me if I am wrong.

Link to comment
Share on other sites

Well that was not exactly true. I can see that dpotferstudio.com has overflow-y: scroll in the main wrapper. What is going wrong for me is that I can not figure out how to lock the address bar on mobile browsers while doing animations with ScrollTrigger. 

 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>dpotferstudio</title>
</head>
<body>
  <div class="main-wrapper">
    <div id="app">
    </div>
  </div>
</body>
</html>

 

html {
  position: fixed;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

body {
  position: fixed;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.main-wrapper {
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
}

#app {
  overflow: hidden;
}

 

Link to comment
Share on other sites

Please make a minimal demo of your setup including a basic animation that you're trying to include if you'd like more of our feedback on a potential solution.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×