fix double scrollbar display bug in mobile

This commit is contained in:
taehoon 2019-03-28 15:50:53 -04:00
parent e97f8a4728
commit 0bb8247822
4 changed files with 22 additions and 4 deletions

View File

@ -39,7 +39,14 @@ export default {
window.CSS.supports('-moz-mask-size', 'contain') || window.CSS.supports('-moz-mask-size', 'contain') ||
window.CSS.supports('-ms-mask-size', 'contain') || window.CSS.supports('-ms-mask-size', 'contain') ||
window.CSS.supports('-o-mask-size', 'contain') window.CSS.supports('-o-mask-size', 'contain')
) ),
isMobile: navigator.userAgent.match(/Android/i) ||
navigator.userAgent.match(/webOS/i) ||
navigator.userAgent.match(/iPhone/i) ||
navigator.userAgent.match(/iPad/i) ||
navigator.userAgent.match(/iPod/i) ||
navigator.userAgent.match(/BlackBerry/i) ||
navigator.userAgent.match(/Windows Phone/i)
}), }),
created () { created () {
// Load the locale from the storage // Load the locale from the storage

View File

@ -839,3 +839,14 @@ nav {
.vb.vb-dragging-phantom > .vb-dragger > .vb-dragger-styler { .vb.vb-dragging-phantom > .vb-dragger > .vb-dragger-styler {
opacity: .5; opacity: .5;
} }
// Disable vuebar and use native scrollbar in mobile device
#app.mobile {
.vb-content {
width: 100% !important;
padding-right: 0 !important;
}
.vb-dragger {
display: none;
}
}

View File

@ -1,5 +1,5 @@
<template> <template>
<div id="app" v-bind:style="bgAppStyle"> <div id="app" v-bind:style="bgAppStyle" v-bind:class="{ mobile: isMobile }">
<div class="app-bg-wrapper" v-bind:style="bgStyle"></div> <div class="app-bg-wrapper" v-bind:style="bgStyle"></div>
<MobileNav v-if="isMobileLayout" /> <MobileNav v-if="isMobileLayout" />
<nav v-else class='nav-bar container' @click="scrollToTop()" id="nav"> <nav v-else class='nav-bar container' @click="scrollToTop()" id="nav">

View File

@ -102,8 +102,8 @@
} }
&-right { &-right {
overflow-y: auto; display: flex;
overflow-x: hidden; flex-direction: column;
} }
&-sitem { &-sitem {