Vuetify는 불필요한 스크롤바를 추가한다.

Vuetify는 불필요한 스크롤바를 추가한다.

vue-cli를 사용하여 새 프로젝트를 만든 후 vuetify를 추가했습니다.vue add vuetify사이트를 열어보니 쓸모없는 스크롤바가 있는 빈 페이지가 보였다.

실제로 앱을 설치해보지 않고App컴포넌트는 아직 문제가 있다.제거해야만 사라집니다.import './plugins/vuetify'

main.discloss.main.discloss.

import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

css 스타일에 다음 항목을 추가합니다.

html { overflow-y: auto }

vuetify 의 디폴트 동작에 대해서는, 다음과 같이 설명합니다(https://vuetifyjs.com/en/getting-started/frequently-asked-questions/ #sublicbar-sublic).

Vuetify는 약간 변경된 버전의 reset을 사용합니다.이 reset은 기본적으로 html 스크롤바를 활성화하여 브라우저 간의 동작을 정상화합니다.이것은 설계상의 선택이며 여러 번 논의되어 왔습니다.가지고 있든 없든 찬반양론이 있고 현재로선 투표는 그대로 두는 것에 찬성하고 있다.이 기능을 무효로 하고 싶은 경우는, 다음의 순서에 따라 주세요.html { overflow-y: auto }스타일 파일로 이동합니다.[ CSS Reset ]페이지 상세보기

vue-cli 3.8 + buefy 사용 시에도 같은 문제가 있습니다.

최적의 솔루션은 아니지만, 다음 두 가지 방법을 사용하고 있습니다.

스크롤 막대를 전체적으로 숨기다

스크롤 바는 CSS 스타일로 숨길 수 있습니다.

<style>
html {
  overflow: hidden !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar {
  width: 0;
  height: 0;
}
</style>

특정 보기에서 스크롤 막대 숨기기

스크롤바를 숨겨서home.vueDOM 스타일을 사용합니다.

<script>
  mounted: function() {
    let elHtml = document.getElementsByTagName('html')[0]
    elHtml.style.overflowY = 'hidden'
  },
  destroyed: function() {
    let elHtml = document.getElementsByTagName('html')[0]
    elHtml.style.overflowY = null
  }
</script>

나에게 효과가 있었던 것은,overflow-hidden수업도 할 수 있고overflow-[x|y]-hidden구체적으로는요.메인 레이아웃을 추가해서<Nuxt class="overflow-x-hidden".

Nuxt가 없으면App.vue:<v-main class="overflow-hidden">

다음과 같은 스타일을 추가하는 것이 나에게 효과가 있었다.

style="overflow: hidden;"

여기에 그것을 설명하는 페이지가 있습니다.

언급URL : https://stackoverflow.com/questions/56973002/vuetify-adds-scrollbar-when-its-not-needed