Jump to content
Search Community

Prevent address bar from hiding on mobile / Scroll Trigger

mosik4 test
Moderator Tag

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

  • 2 years later...

Hi @ZachSaucier, I have been facing the same issue. I have replicated my HTML structure in the below codepen demo. I just wanted to keep the address bar visible always and able to trigger the animations on scroll.

 

After setting all the overflow and position properties, the address bar is fixed now. But the scrolltrigger animations are not working as expected.

 

The animations are getting triggered only using scroll wheel and not by touch swipe.

 

Codepen:

See the Pen zYmydjq?editors=0010 by arulpraba (@arulpraba) on CodePen

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.
×
×
  • Create New...