33 :style =" `width:${theWidth};height:${theHeight}`"
44 class =" ohyeah-scroll-box"
55 <!-- 纵向滚动条 -->
6- <div v-if =" !noVer"
6+ <div v-if =" !noVer && !isMobile "
77 @mousedown.stop =" onTrackMousedown($event,1)"
88 @mouseenter.stop =" hoverH = true"
99 @mouseleave.stop =" hoverH = false"
1414 :style =" `transition:width 250ms,height 250ms;background-color:${thumbColor};width:${(hoverH || barHDown )? breadth + 4 : breadth}px;height: ${barHTall}px;transform: translateY(${barHScrollTop}px);border-radius:${breadth}px`"
1515 </div >
1616 <!-- 横向滚动条 -->
17- <div v-if =" !noHor"
17+ <div v-if =" !noHor && !isMobile "
1818 @mousedown.stop =" onTrackMousedown($event,2)"
1919 @mouseenter.stop =" hoverW = true"
2020 @mouseleave.stop =" hoverW = false"
2626 </div >
2727 <!-- 默认内容 -->
2828 <div :ref =" `ohyeahbody-${id}`"
29- :class =" ['ohyeah-scroll-body',{'isSmooth': needSmooth}]"
29+ :class =" ['ohyeah-scroll-body',{'isPc': !isMobile},{' isSmooth': needSmooth}]"
3030 :style =" `${noVer ? 'height:100%;overflow-y:hidden;' : ''} ${noHor ? 'width:100%;overflow-x:hidden;' : ''}`"
3131 tabindex =" 9999"
3232 @scroll =" onScrollEvent"
@@ -45,6 +45,7 @@ export default {
4545 name: " Ohyeah"
4646 data () {
4747 return {
48+ isMobile: false ,
4849 observer: null , // 监听变化
4950 isShowH: false , // 是否显示垂直滚动条
5051 isShowW: false , // 是否显示横向滚动条,
@@ -86,19 +87,29 @@ export default {
8687 resizeObject: { type: Boolean , default: false } // resize模式,默认scroll
8788 },
8889 mounted () {
90+ // 是否为移动端
91+ this .isMobile = / (android)| (iphone)| (symbianos)| (windows phone)| (ipad)| (ipod)/ .test (
92+ navigator .userAgent .toLowerCase ()
93+ );
94+ // 是否支持原生平滑滚动,chrome/firefox/opera支持
95+ this .isBehavior = " scroll-behavior" in document .body .style ;
96+
8997 // 监听内部宽高变化,用于调整滚动条大小和位置
9098 this .callback ();
9199 this .listenResize ();
92- // 是否支持原生平滑滚动,chrome/firefox/opera支持
93- this .isBehavior = " scroll-behavior" in document .body .style ;
94- // 监听鼠标拖动事件
95- document .addEventListener (" mousemove" this .onBarDragMove , false );
96- document .addEventListener (" mouseup" this .onMouseUp , false );
100+
101+ if (! this .isMobile ) {
102+ // 监听鼠标拖动事件
103+ document .addEventListener (" mousemove" this .onBarDragMove , false );
104+ document .addEventListener (" mouseup" this .onMouseUp , false );
105+ }
97106 },
98107 beforeDestroy () {
99108 // 卸载鼠标拖动事件
100- document .removeEventListener (" mousemove" this .onBarDragMove , false );
101- document .removeEventListener (" mouseup" this .onMouseUp , false );
109+ if (! this .isMobile ) {
110+ document .removeEventListener (" mousemove" this .onBarDragMove , false );
111+ document .removeEventListener (" mouseup" this .onMouseUp , false );
112+ }
102113
103114 if (window .ResizeObserver ) {
104115 this .observer .disconnect ();
@@ -525,19 +536,21 @@ export default {
525536 width : 100% ;
526537 outline : none ;
527538 overflow : auto ;
528- -ms-overflow-style : none !important ;
529- scrollbar-width : none ;
530539 -webkit-overflow-scrolling : touch ;
531540 * {
532541 -ms-overflow-style : auto ;
533542 }
543+ & .isPc {
544+ -ms-overflow-style : none !important ; // IE/Edge
545+ scrollbar-width : none ; // Firefox
546+ // Chrome/Safari/Opera
547+ & ::-webkit-scrollbar {
548+ display : none ;
549+ }
550+ }
534551 & .isSmooth {
535552 scroll-behavior : smooth ;
536553 }
537-
538- & ::-webkit-scrollbar {
539- display : none ;
540- }
541554 }
542555
543556 & .mobile {
0 commit comments