CSS overflow-y: scroll scrollbar position not in the right place

user_14666511 0
Viewed 175

I'm trying to create a smooth scroll in CSS from one page to the next. Everything seems to work well until I used overflow-y: scroll; then the scrollbar appears in the middle of the page width instead of the standard (sticking to the left).

screengrab

body {
  height: 100vh;
  line-height: 1.6;
  overflow: hidden;
}

.container {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  scroll-behavior: smooth;
}

section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100vh;
}
<body>
  <div class="container">
    <section id="sec1">Section 1</section>

    <section id="sec2">Section 2</section>
  </div>
</body>

css html
3 Answers

Since <body> has some default value for margin (for some browsers like Chrome) set it to zero. And to make the body occupy the complete width of the screen, set the width as 100% or 100vw.

body {
    margin: 0px;
    width: 100%; // 100vw also works
}


body {
  height: 100vh;
  width: 100vw;
  margin: 0px;
  line-height: 1.6;
  overflow: hidden;
}

.container {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  scroll-behavior: smooth;
}

section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  height: 100vh;
}
<body>
  <div class="container">
    <section id="sec1">Section 1</section>

    <section id="sec2">Section 2</section>
  </div>
</body>

user_146668500

Try giving

 body {
   width: 100vw;
}

The .container width is set to 100%, but it's parent does not have any width specified. That must be the issue. If it doesn't fix it, try also giving

html {
  width: 100vw;
}
user_134422450

because you gave it 'overflov-y:scroll' to container. it turns out there because its width is that much. try to change

user_146174820
Related