[Support request] Scroll Bar Disappears

[Luke]

I’ve noticed today that the browser scroll bar on my blog disappears when I hover the mouse cursor over the top of the page. I need to reload the page for the scroll bar to appear again. Do you know why it’s disappearing? It is visible when I load the page but as soon as I get to the top of the page and my mouse’s cursor goes over the top of the page – the scroll bar disappears.

[David]

Hi there,

it looks related to the the info bar being added to the top of the site.
When it loads it adds these classes to the HTML element: cp-overflow-hidden cp-ib-open cp-mp-open cp-window-viewport

Which then getst these styles – that block scrolling:

.cp-custom-viewport, .cp-oveflow-hidden, .cp-window-viewport {
    overflow-x: hidden;
    overflow-y: hidden;
}

Theres a possibility that a script that should run to remove those classes isn’t being fired because of the Optimizations on the site. You can test this by disabling any Cache/Optimization plugins the site is running.

But you should also raise the issue with the author of the info bar plugin.

[Luke]

Hi. Thanks for the answer. Yes, I also thought that the info bar may be responsible for it.

However I have no cache plugins on my blog. I think Ezoic is responsible for caching my site and maybe Cloudflare but I’m not sure.

What do you mean by Optimization plugin?

[David]

Things like WP Rocket, Autoptimize, Ezoic Leap….

[Luke]

But I think it won’t affect mobile users because there is no mouse cursor and no scrolling bar on mobiles, right?

[David]

It will still affect mobile devices. The CSS that plugin is adding is telling the browser viewport there is No Overflow. So the browser makes the screen unscrollable, doesn’t matter if thats with a mouse or a touch screen.

[Luke]

Hmm. Maybe you’re right. But I’ve just checked my site on a smartphone and everything was fine. I was able to scroll up and down without any problems. Thanks 🙂

[David]

The problem only seems to exist on first load, once the cookie has been stored on the device it goes away.

Personally i would report the issue to the Plugin author. As you cannot know what each visitor will experience and having a unscrollable site may just persuade users to leave.

[Luke]

I have already reported the issue to the plugin author. I also noticed that when I am logged into my blog this doesn’t happen. It happens only when I am logged out. OK, thanks for helping me.

[David]

You’re welcome.

[Luke]

Hi again

I have received the reply from the plugin developer. They wrote that I should paste the below code on my live site so that my visitors don’t have to see that issue:

.cp-custom-viewport, .cp-oveflow-hidden, .cp-window-viewport{

overflow:scroll;
}

Should I go to Customizing — Additional CSS and paste this line of code in there??

By the way, shouldn’t this code be in one line, e.g. .cp-custom-viewport, .cp-oveflow-hidden, .cp-window-viewport{overflow:scroll;}

[David]

You can add the CSS to Customizer > Additional CSS.
No the CSS doesn’t have to be on one line 🙂

[Author]

Posts