How to remove double scroll bar?

user_7349412 0
Viewed 37012

I have a double scroll bar on my website in Chrome and Firefox (both browsers are up to date). I have been researching the web and stackoverflow and have tried following suggested options on the html element:

html { overflow: hidden; } - afterwards - html { overflow: auto; } - and - html { overflow: scroll; }

None of them got rid of the double bar, even worse some blocked me from scrolling at all.

I'm not sure which other element to target or what might be causing this. Does anyone have a suggestion?

The website is https://www.lekkerlimburgs.be

scrollbar
3 Answers

I had the same problem with one of my wordpress websites. I added the following CSS which fixed the problem for me : 

body{
    width:100%;
    overflow-x:hidden;
    overflow-y:hidden;
}

It seems like you are trying to add the css from within the html tag. For this you will need to add style tags within the body of the html. If this is the case use the following code:

<style>
    body{
        width:100%;
        overflow-x:hidden;
        overflow-y:hidden;
    }
</style>

Hope this helped :)

user_49206650

Alternatively, if you cant locate the source of the bug as explained by Gant, you can Use Browser developer tools to isolate the offending tag. What i do is

  1. Inspect the malformed page elements using your browser developer tools
  2. Hover on suspicious elements and Delete them while keeping an eye on the inner scrollbar. if it disappears then the element you've just deleted is the offender undo deletion (Ctrl+Z) and inspect it. Otherwise if the scrollbar persist even after deleting the element, then the element you just removed isn't the offender. therefore, undo deletion and move to another element
  3. if the offending element is huge/broad perform step 2 on its sub elements and iterate till offending sub element is found. then check the css associated with the sub element causing the issue for overflow:auto

This approach may be better if you have tons of stylesheets and dont know how to go about it

*Adapted from Chris Coyier Fixing Unintended Body Overflow

user_9746240
Related