Vuejs remove scrollbar from top navbar

Question

In my Vue js Application the navbar is flickering due to scrollbar i.e.., in some routes there is scroll bar and in some routes there is no scrollbar due to that the navbar is flickering same as this stackoverflow page, the scrollbar is inside of navbar whenever changing between routes it will flicker . Is there is way remove scrollbar from navbar

What do you mean the 'navbar is flickering same as this stackoverflow page'? Noting is flickering here for us? You can generally remove a scrollbar by using `overflow: hidden` property, but usually the scrollbar is there because something is getting pushed beyond the bounds of the viewport. If you use your browser inspect tools you can usually find what is too wide or high causing the scroll bar to appear. — skribe, Oct 01 '19 at 07:25
@skribe what i mean by navbar flickering is whenever you switch between routes in 'SO' site as the scrollbar is inside of navbar it gets adjusted (the scrollbar goes away and again comes back ) which looks like flickering — charithreddyv, Oct 01 '19 at 07:31

score 2 · Answer 1 · answered Oct 01 '19 at 12:37

If you want to remove the flickering, you should make your content container scrollable by defining a height, and set overflow-y to auto.

That way the scrollbar wont be beside your navbar and instead under it, beside your content

window.onload = () => {
  new Vue({
    el: '#app'
  })
}

/* Make content container scrollable, so there's no scrollbar beside the NAV */
html, body{
  overflow-y: hidden;
}

/* you might need to adjust pixel amount based on current screen width*/
#content{
  height: calc(100vh - 56px);
  overflow-y: auto;
}

/* Another way is to make the scrollbar always be visible, that way your nav wont "flicker" */
/*
body{
  overflow-y: scroll;
}
*/

<link href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>


<div id="app">
  <b-navbar type="dark" variant="dark">
    <b-navbar-nav>
      <b-nav-item>
        Hello
      </b-nav-item>
    </b-navbar-nav>
  </b-navbar>
  <b-container fluid id="content">
    <!-- Your content here / router-view -->
    <br v-for="i in 50"/>
  </b-container>
</div>

score 0 · Answer 2 · answered Oct 05 '19 at 15:35

Another option is to give the body (or html) element a minimum height that is taller than the viewport height via CSS:

body {
  min-height: 101vh;
}

This will make the page at least 1% taller than the (window) viewport height (the vh unit), which will always keep a scrollbar on the page.

Vuejs remove scrollbar from top navbar

2 Answers2