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 !

CodePudding user response：

what you can do to easily rectify this issue is open your website on chrome/Firefox and right click on the element where you don't want the scrollbar and click on Inspect element, there you'll see what property you have applied to you div's, most probably it will be overflow or overflow-y. In browser inspection you can easily figure it out.

CodePudding user response：

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 >
  <div >
    <div >
    
    </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.

CodePudding user response：

Finally solved it. I had to put manually a <style : "overflow-y:hidden;"> to my , despite I tried to solve it with CSS. Now everything working well !