2

I'm coding in Next.js and found out that on each subpages in my project appears unwanted horizontal scrollbar, allowing to scroll about 30px or something. What's interesting is that this scrollbar appears only when content is longer than viewport. I tried to set overflow: hidden to div in Layout component but it seems like the problem is somewhere higher in hierarchy. I also tried setting overflow property to html, body in css but it blocks sticky positioning of header.

Does anyone has idea what should I do?

45human
  • 51
  • 4
  • Sometimes the scrollbar on the side of a div narrows the div enough that it also needs a scrollbar on the bottom. Could that be your problem? – O. Jones Jan 25 '21 at 23:21
  • Don't think so. Div which wraps anything what is in Layout component, has ```width: 100vw``` as well as other components. As I sad, horizontal scroll bar appears only when content of ```Layout component``` is longer than viewport height. – 45human Jan 25 '21 at 23:30
  • 1
    That sounds like this problem: https://stackoverflow.com/q/58698412/5641669 – Johannes Jan 26 '21 at 00:04
  • yeah, I set everywhere ```100%``` instead of ```vw``` and also made smaller some background big shapes and it solved problem – 45human Jan 26 '21 at 00:13

1 Answers1

1

I added this on my global.css and it worked

body {
  overflow-x: hidden;
}
Aldo Amati
  • 11
  • 1