Address bars on mobile browsers doesn't hide onscroll when using smooth scrollbar for whole body content

[amrthdivakr]

Environment

• Browser: Chrome Android
• Version of smooth-scrollbar: ^8.4.1 (with overscroll)

Issue Summary

The address bar in mobile browsers like chrome hides on scroll down or swipe gesture, but when using smooth scrollbar for whole body content the address bar doesn't hide and I loose a lot of screen space as a result. Its not really a bug cause no actual scrolling is happening. the content in the main div is translating up and down, so the browser gets a single div of 100vh and hidden overflow.

Is there any way to work around this problem. I'm really new to smooth scrollbar and I'm not an expert with plugins either. So please help me out here.

Thanks in advance.

[olekmartynenko]

@amrthdivakr Did you fixed this issue?

[konstantin-lysenko]

@amrthdivakr Did you fixed this issue?

Put a content into a container. Set 100%+scrollWidth for the content and set overflow: hidden for the container.

[olekmartynenko]

@konstantin-lysenko Hi, could you please explain what do you mean here 'Set 100%+scrollWidth for the content ' ?

[konstantin-lysenko]

@konstantin-lysenko Hi, could you please explain what do you mean here 'Set 100%+scrollWidth for the content ' ?

Hi, sure! Create container, <div class="container"> for example. Insert into the container one more div ( <div class="content"> ).
Set the width or the min-width CSS property - calc( 100% + width_of_scroll ), width_of_scroll - value in pixels.

[olekmartynenko]

@konstantin-lysenko Hi, could you please explain what do you mean here 'Set 100%+scrollWidth for the content ' ?

Hi, sure! Create container, <div class="container"> for example. Insert into the container one more div ( <div class="content"> ).
Set the width or the min-width CSS property - calc( 100% + width_of_scroll ), width_of_scroll - value in pixels.

Unfortunately that doesn't work for me. I just get extremely wide container

[konstantin-lysenko]

@konstantin-lysenko Hi, could you please explain what do you mean here 'Set 100%+scrollWidth for the content ' ?

Hi, sure! Create container, <div class="container"> for example. Insert into the container one more div ( <div class="content"> ).
Set the width or the min-width CSS property - calc( 100% + width_of_scroll ), width_of_scroll - value in pixels.

Unfortunately that doesn't work for me. I just get extremely wide container

Try to set calc( 100vw + width_of_scroll )

[olekmartynenko]

@konstantin-lysenko Hi, could you please explain what do you mean here 'Set 100%+scrollWidth for the content ' ?

Hi, sure! Create container, <div class="container"> for example. Insert into the container one more div ( <div class="content"> ).
Set the width or the min-width CSS property - calc( 100% + width_of_scroll ), width_of_scroll - value in pixels.

Unfortunately that doesn't work for me. I just get extremely wide container

Try to set calc( 100vw + width_of_scroll )

but thats changes width of container, the issue is when I use this plugin to whole website content address bar doesn't hide on mobile devices cause default scroll events haven't been called.

[mschristensen88]

Is anybody working on a solution for the native browser functionality to not be effected by the smooth scroll? Because we're experiencing the same issue on mobile and tablet. That the top- and bottom bar aren't scaling down on scroll.

[ashehzadgec]

Hi,

You can hide these divs through javascript using visibility hidden/ opacity: 0 etc. CSS direct styling won't work. This solution Worked for me. Hopefully, for you too.

[oleksandrmartynenko]

@mschristensen88

Hi! To fix this issue on my project I've used some 'hack'.
I'm checking scroll direction with this function:

let dir;
function scrollDirecrionChecker(offset) {
  if (!lastOffset) {
    lastOffset = offset;
    return;
  }
  if (offset.y < lastOffset.y) {
    dir = 'up';
  } else if (offset.y > lastOffset.y) {
    dir = 'down';
  } else {
    dir = 'still';
  }

  lastOffset = offset;

  switch (dir) {
    case 'up':
    case 'down':
    case 'still':
  }
}

And after that I have this code:

scrollbar.addListener(function (status) {
  let offset = status.offset;
  scrollDirecrionChecker(offset);
  if (dir == 'down') {
    let nViewH = window.outerHeight;
    nViewH -= 250;
    $('body').css('height', nViewH + 'px');
    window.scrollTo(0, 1);
  } else if (dir == 'up') {
    window.scrollTo(0, 0);
  }
});

Unfortunately this code helps only to to hide address bar when you scroll to the end of page.
Hope that will help you.

[ashehzadgec]

What I understood is that you want to hide that scrollbar when on tablets and mobiles. And I replied above for the same or maybe I missed something. So, the below solution works for me, and using it you can hide the bar at any breakpoint you want.
`
// as you want to hide it on tablet and mobile

if(window.matchmedia('(max-width: 1024px)').matches) {
// select the scrollbar divs and hide them using javascript on window load
window.addEventListener('load', ()=> {
let bar = document.querySelectorAll('.scrollbar-track, .scrollbar-thumb, .scrollbar-track-y');
console.log(bar);

bar.forEach((el) => {
	el.style.visibility = 'hidden';
});

})
`
Hope this will solve your issue.

[antonioberetini]

I guess what he is trying to achieve is what I am having an issue with as well. In native scroll when using body tag, Safari, Chrome and other Browers dynamically hide top, and bottom of the browser's navigation controls to increase the viewport height while scrolling.

Examples:

Safari & Edge.

RPReplay_Final1640453257.mov

RPReplay_Final1640453152.mov

[FalkoJoseph]

Did you guys have a solution on this?

[robizzt]

On Android, Chrome browser, address bar will hide when you scroll to the bottom of the page and scroll again. And will show if you came back to the top of the page, and scroll again.

But on iOS, Safari browser, address bar is always visible no matter what you do, which is a problem since you can't see element that are in the bottom of the page and you can't even reload page by dragging down.

Note: I'm using 100vh on main data-scrollbar element.

[asteroid-b612]

any updates on this?

[gtrabanco]

Have you checked with CSS?

*::-webkit-scrollbar {
  display: none;
}

[finexware]

So guys, no fix for this issue?

[anonymus1145]

You just need to move the scroll from the element to the HTML, the browser can't detect the scroll inside anything beside the HTML.