【问题标题】: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%,这将始终在页面上保持滚动条。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2020-11-03
      • 1970-01-01
      • 1970-01-01
      • 2021-09-21
      • 1970-01-01
      • 2018-07-08
      • 2019-06-05
      • 1970-01-01
      相关资源
      最近更新 更多