How to remove double scroll bar?

Question

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

Answer 1

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