How to stop the scroll caused by nav bar

Question

I have a navbar and a body container. But the navbar is causing the windows to vertically auto-scroll the pages. When the navbar is removed scroll behavior is not there.

Why is the navbar causing the scroll behavior? How to stop the windows from being scroll when the navbar is still in places?

    .wrapper {
        height: 100vh;
        max-height: 100vh;
        overflow: hidden;
      }

      .main {
        flex: 1 0 auto;
        /*overflow-y: auto;*/
      }

      .inner {
        flex: 1 0 0;
        overflow-y: auto;
        /*
    min-height: 100%;
    max-height: 100%;
    */
      }

      .sidebar {
        overflow-y: auto;
      }

      .content {
        overflow-y: auto;
        flex-grow: 1;
      }

<link href="https://unpkg.com/bootstrap@4.5.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand navbar-light bg-white topbar shadow">
  <a class="navbar-brand" href="#">ENG</a>
</nav>
<div class="container-fluid">
  <div class="wrapper row">
    <div class="col-9 mh-100 inner d-flex flex-column p-0">
      <div class="main bg-info p-3 d-flex flex-column">
        <div class="p-3 content">
          <h3>Main content area</h3>
          <p>
            Voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolornon numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
            Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
            ex ea commodi consequatur? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores eos qui
            ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolornon numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
          </p>
        </div>
        <div class="bg-faded p-3">
          inner footer (stick to bottom of content area)
        </div>
      </div>
      <footer class="bg-inverse text-white p-3">
        footer (stick to bottom of left)
      </footer>
    </div>
    <div class="col-3 mh-100 bg-faded p-3 sidebar">
      <h3>Sidebar</h3>
      <p>
        This content should scroll independently if needed. eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolornon numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim
        ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
        consequatur? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
      </p>
    </div>
  </div>
</div>

The example is taken from here: Flexbox height issue with nested flex-grow boxes in Bootstrap 4

The actual problem is here: https://www.codeply.com/v/Bk9II9ARnt

Harry · Answer 1 · 2020-10-16T04:00:21.843

0

Try overflow-x: hidden; or overflow-y: hidden; in your navbar class depending on horizontal or vertical scroll.

edited Oct 16 '20 at 04:00

answered Oct 16 '20 at 03:58

Harry

275
1
2
10

basically, it was the problem with the vertical scrolling, but adding `overflow-y: hidden` didn't work for me – Rasik Oct 16 '20 at 04:04

score 0 · Answer 2 · answered Oct 16 '20 at 04:20

Check this please :)

 .wrapper {
        height: 100vh;
        max-height: 100vh;
        overflow: hidden;
      }

      .main {
        flex: 1 0 auto;
        /*overflow-y: auto;*/
      }

      .inner {
        flex: 1 0 0;
        overflow-y: auto;
        /*
    min-height: 100%;
    max-height: 100%;
    */
      }

      .sidebar {
        overflow-y: auto;
      }

      .content {
        overflow-y: auto;
        flex-grow: 1;
      }
body{overflow-y: hidden;}

<link href="https://unpkg.com/bootstrap@4.5.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand navbar-light bg-white topbar shadow">
  <a class="navbar-brand" href="#">ENG</a>
</nav>
<div class="container-fluid">
  <div class="wrapper row">
    <div class="col-9 mh-100 inner d-flex flex-column p-0">
      <div class="main bg-info p-3 d-flex flex-column">
        <div class="p-3 content">
          <h3>Main content area</h3>
          <p>
            Voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolornon numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
            Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
            ex ea commodi consequatur? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores eos qui
            ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolornon numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
          </p>
        </div>
        <div class="bg-faded p-3">
          inner footer (stick to bottom of content area)
        </div>
      </div>
      <footer class="bg-inverse text-white p-3">
        footer (stick to bottom of left)
      </footer>
    </div>
    <div class="col-3 mh-100 bg-faded p-3 sidebar">
      <h3>Sidebar</h3>
      <p>
        This content should scroll independently if needed. eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolornon numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim
        ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
        consequatur? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
      </p>
    </div>
  </div>
</div>

now it will stop the vertical scrolling completely. Sometimes if I have a very long form on other pages I will need that scrolling behavior. — Rasik, Oct 16 '20 at 04:27
you should use position fixed in menu then and add margin top on container-fluid — KM Likhon, Oct 16 '20 at 05:47
Actually, my problem is something like this, when the body has overflow-y hidden, the div also gets hidden, it is more visible here https://www.codeply.com/p/Bk9II9ARnt — Rasik, Oct 16 '20 at 06:31

score 0 · Answer 3 · answered Oct 16 '20 at 06:14

.wrapper {
        height: 100vh;
        max-height: 100vh;
        overflow: hidden;
      }

      .main {
        flex: 1 0 auto;
        /*overflow-y: auto;*/
      }

      .inner {
        flex: 1 0 0;
        overflow-y: auto;
        /*
    min-height: 100%;
    max-height: 100%;
    */
      }

      .sidebar {
        overflow-y: auto;
      }

      .content {
        overflow-y: auto;
        flex-grow: 1;
      }
nav.navbar.navbar-expand.navbar-light.bg-white.topbar.shadow {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 9;
}

.container-fluid {
    margin-top: 60px;
}

<link href="https://unpkg.com/bootstrap@4.5.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand navbar-light bg-white topbar shadow">
  <a class="navbar-brand" href="#">ENG</a>
</nav>
<div class="container-fluid">
  <div class="wrapper row">
    <div class="col-9 mh-100 inner d-flex flex-column p-0">
      <div class="main bg-info p-3 d-flex flex-column">
        <div class="p-3 content">
          <h3>Main content area</h3>
          <p>
            Voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolornon numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
            Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
            ex ea commodi consequatur? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Voluptas sit aspernatur aut odit aut fugit, sed quia cor magni dolores eos qui
            ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolornon numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
          </p>
        </div>
        <div class="bg-faded p-3">
          inner footer (stick to bottom of content area)
        </div>
      </div>
      <footer class="bg-inverse text-white p-3">
        footer (stick to bottom of left)
      </footer>
    </div>
    <div class="col-3 mh-100 bg-faded p-3 sidebar">
      <h3>Sidebar</h3>
      <p>
        This content should scroll independently if needed. eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolornon numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim
        ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
        consequatur? Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
      </p>
    </div>
  </div>
</div>

How to stop the scroll caused by nav bar

3 Answers3