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.vue
DOM 스타일을 사용합니다.
<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
'programing' 카테고리의 다른 글
Vue 3 SFC 스크립트 설정 구문을 사용하여 Vuex mapGetters를 사용하는 방법 (0) | 2022.08.24 |
---|---|
Vue에서 특정 키워드를 가진 모든 $ref를 선택하려면 어떻게 해야 합니까? (0) | 2022.08.24 |
외부 웹 사이트를 링크하는 VueJs vue-router (0) | 2022.08.24 |
Vuetify - 양식에서 왼쪽 라벨 텍스트와 오른쪽 텍스트 필드를 수행하는 방법 (0) | 2022.08.24 |
Vuex 및 Vuex-persistedstate를 사용한 자동 사인인 (0) | 2022.08.24 |