css - Vuejs 从顶部导航栏中删除滚动条

Question

在我的 Vue js 应用程序中，导航栏由于滚动条而闪烁，即..，在某些 route 有滚动条，而在某些 route 没有滚动条，因为导航栏与这个 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>