Vuejs удалить полосу прокрутки с верхней панели навигации - PullRequest
Новая
       7

Vuejs удалить полосу прокрутки с верхней панели навигации

0 голосов
/ 01 октября 2019

В моем приложении Vue js панель навигации мерцает из-за полосы прокрутки, т. Е. В некоторых маршрутах есть полоса прокрутки, а в некоторых маршрутах полоса прокрутки отсутствует из-за того, что панель навигации мерцает так же, как эта страница stackoverflow, полоса прокрутки находится внутриnavbar при переключении между маршрутами будет мерцать. Есть ли способ удалить полосу прокрутки от Navbar

Ответы [ 2 ]

2 голосов
/ 01 октября 2019

Если вы хотите убрать мерцание, вы должны сделать контейнер содержимого прокручиваемым, задав высоту, и установить для параметра 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>
0 голосов
/ 05 октября 2019

Другим вариантом является присвоение элементу body (или html) минимальной высоты, которая выше высоты области просмотра с помощью CSS: 

body {
  min-height: 101vh;
}

Это сделает страницу как минимум 1%выше, чем высота окна просмотра (окна) (единица vh), которая всегда будет держать полосу прокрутки на странице.

...