Question 44571 in Html Question posted in
Some basic documentation can be found here.

How to Hide&Unhide the Mobile browser Address bar based on scrolling? – Html

Iam working on a blog website project where in the home route there will be some scrollable contents. Once, user scrolls down I want to hide the address bar of mobile devices to get hidden first. Then once user scrolls up the address bar should get visible again.

The similar method is implemented by most of the websites for example stackoverflow and etc..

How do i work my way out?

Tags:

2

Answers


  1. 0

    You can consider hiding it when user is scrolled a certain distance from the top of your webpage using window.scrollY. it gives you the vertical distance of the top of your current viewpoint to the topmost of your whole webpage, and since you need it to show again scrolling back up, you’d probably want to use useEffect to keep checking this condition.

    useEffect(()=>{
  if (window.scrollY >= 100) {
    //insert code to hide your element here
  } else {
    // insert code to show element
  }
},[window.scrollY])
    Login or Signup to reply.
  2. 0

    Hiding and showing the address bar is part of the browser itself, it’s not possible to hide and show browser elements.

    Most browsers already support this by default, if the html tag is scrollable. But because this is default behaviour I suspect you changed something about the scrolling behaviour. Is it possible that you enabled scrolling on the HTML tag (or added max height?) and the scroll actions are happening on a different level?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search