Vuejs从顶部导航栏移除滚动条

Question

在我的Vue js应用程序中，导航栏由于滚动条而闪烁，即，在一些路线中有滚动条，而在一些路线中没有滚动条，因为导航栏闪烁与此stackoverflow页面相同，每当在路线之间切换时滚动条都会闪烁。有没有办法从导航栏中删除滚动条？

Answer 1

如果您想要移除闪烁，您应该通过定义高度使您的内容容器可滚动，并将overflow-y设置为auto。

这样滚动条就不会在导航栏的旁边，而是在导航栏的下面，在你的内容旁边

​

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>

​

Answer 2

另一种选择是通过CSS给body (或html)元素一个比视口高度高的最小高度：

body {
  min-height: 101vh;
}

这将使页面比(窗口)视口高度( vh单位)至少高1%，这将始终在页面上保留滚动条。