Vuejs 从顶部导航栏中删除滚动条答案

【问题标题】：Vuejs remove scrollbar from top navbarVuejs 从顶部导航栏中删除滚动条
【发布时间】：2020-01-30 10:53:02
【问题描述】：

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

【问题讨论】：

“导航栏与此 stackoverflow 页面一样闪烁”是什么意思？注意在这里为我们闪烁？您通常可以使用overflow: hidden 属性删除滚动条，但通常滚动条存在是因为某些东西被推到了视口之外。如果您使用浏览器检查工具，通常可以发现导致滚动条出现的太宽或太高。
@skribe 我所说的导航栏闪烁的意思是，每当您在“SO”站点中的路线之间切换时，因为滚动条位于导航栏内部，它会被调整（滚动条消失并再次回来），看起来像闪烁

标签： css vue.js navbar bootstrap-vue

【解决方案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>

【讨论】：

【解决方案2】：

另一种选择是通过 CSS 为 body（或 html）元素提供比视口高度更高的最小高度：

body {
  min-height: 101vh;
}

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

【讨论】：