CODEWITHSUNDEEP
htmlcss
rith
rith

Reputation: 25

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

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>

Upvotes: 2

Views: 677

Answers (3)

sas
sas

Reputation: 532

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>

Upvotes: 2

edddd
edddd

Reputation: 482

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;
}

Upvotes: 1

Nurlan Yusifli
Nurlan Yusifli

Reputation: 11

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

Upvotes: 0

Related Questions