'I have 2 scrolls bar on my page , can't figure out why

I'm creating a website at the moment for quite a long time now. The last thing I did with it was to make it responsive on my second smaller laptop with mediaquerries. However, I'm noting that another scrollbar appeared when I opened the site on my main computer. The 2 rightside scrollbars aren't dependant.

The whole website is in a folder, so I can't really share HTML/CSS codes. Firstly I wanted to know if someone already faced this kind of problem and could advise me from where to start to solve it. I guess it's in the CSS where I possibly created many body/html rules ?

Thank you !

htmlcssscrollbar


Solution 1:[1]

So basically you were having overflow enabled on your div and the default is of body. therefore you saw 2 scrollbars. One of div and one of body.

That's great if you've solved it by disabling the default body scrollbar and keeping the div overflowable in the y-axis.

Solution 2:[2]

I have faced a similar problem a while ago.
For a better answer i should read the code but i can tell you where you should start to look for the problem. This is probably happening because of a div in your page that has a rule such as "overflow-y: auto" and it's parent is itself bigger than the current page heigth.

.container1 {
  background-color: red;
  height: 10000px;
  width: 100%;
}
.container2 {
  background-color: blue;
  height: 100vh;
  width: 100%;
  overflow-y: auto;
}

.container3 {
  background-color: green;
  height: 10000px;
  width: 50px;
}
<div class="container1">
  <div class="container2">
    <div class="container3">
    
    </div>
  </div>
</div>

I made a quick snippet you can execute to see better what is happening.

I hope this helps you to find the problem.

Solution 3:[3]

Finally solved it. I had to put manually a <style : "overflow-y:hidden;"> to my body on my html page, even if I tried to solve it with CSS. Now everything's working well !

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Techhead Ritz
Solution 2 Matteo Brusarosco
Solution 3

Related Questions