w-component-vue 2.1.69 → 2.1.73

package/src/components/WPanelScrollyCore.vue

@@ -1,42 +1,39 @@
 <template>
     <div
-        :style="`height:${panelHeight}px; box-sizing:content-box;`"
+        :style="`box-sizing:content-box;`"
         v-domresize
-        @domresize="resize"
+        @domresize="resizePanel"
         @mouseenter="mouseEntering=true"
         @mouseleave="mouseEntering=false"
-        :changeRatio="changeRatio"
-        :changeViewHeightMax="changeViewHeightMax"
+        :changeScrollTop="changeScrollTop"
     >
 
-        <!-- 不能設定border-width=0, 瀏覽器會額外進行偵測渲染導致抖動 -->
-        <div :style="`position:relative; overflow:hidden; height:${viewHeightMax}px;`">
-
-            <!-- bar區 -->
-            <div :style="`position:absolute; top:0px; right:0px; z-index:1; height:${viewHeightMax}px;`" v-show="contentHeightEff>0">
-                <!-- 外層設定box-sizing=content-box也就是高度不包括border與padding, 內層高度就會是viewHeightMax不需減少, 此時bar的設定box-sizing=border-box才能自動考量padding影響 -->
-                <div :style="`box-sizing:border-box; padding:${barPanelPadding}px 1px; position:relative; width:${barWidth}px; height:100%; background:${useBarBackgroundColor}; transition:background 0.5s;`">
-                    <div
-                        ref="divBar"
-                        :style="`transform:translateY(${barLoc}px); width:100%; height:${barSize}px; user-select:none; cursor:pointer; border-radius:15px; background:${useBarColor}; transition:background 0.5s;`"
-                    ></div>
+        <!-- 計算nativeBarWidth, 需使用overflow:scroll否則firefox無法順利顯示右側捲軸 -->
+        <div style="position:relative; width:0px; height:0px; opacity:0;">
+            <div style="position:absolute; left:0; top:0;">
+                <div ref="divDetect" style="width:50px; height:50px; overflow:scroll;">
+                    <div style="width:100px; height:100px;"></div>
                 </div>
             </div>
+        </div>
+
+        <div
+            :style="`position:relative; width:100%; overflow-x:hidden;`"
+        >
 
-            <!-- 內容區 -->
+            <!-- 因瀏覽器計算誤差100%+nativeBarWidth仍會出現捲軸邊界, 故需+1px使捲軸能完全隱藏 -->
             <div
-                ref="divPanel"
-                class="clsPanel"
-                :style="`position:relative; overflow-x:hidden; overflow-y:auto; width:calc( 100% + ${nativeBarWidth+extWidth}px ); height:${panelHeight}px;`"
-                @scroll="scroll"
+                ref="divShell"
+                _class="sb"
+                :style="`position:relative; width:calc( 100% + ${nativeBarWidth+1}px ); height:${panelHeight}px; box-sizing:content-box; overflow-x:hidden; overflow-y:scroll;`"
+                v-domresize
+                @domresize="resizeShell"
+                @scroll="scrollShell"
             >
 
-                <!-- 通過高度設定為viewHeightMax+extHeight使divPanel出現捲軸, 並強制設定scrollTop=extHeight/2可使保持監聽上下捲動與拖曳事件 -->
-                <div :style="`position:absolute; top:0px; left:0px; width:calc( 100% + ${extWidth}px ); height:${viewHeightMax+extHeight}px;`"></div>
-
                 <div
-                    ref="divSlot"
-                    :style="`position:absolute; top:${fakeScrollTop}px; left:0px; overflow:hidden; width:calc( 100% + ${extWidth}px ); height:${viewHeightMax}px;`"
+                    ref="divContent"
+                    :style="``"
                     v-dommutation
                     @dommutation="mutation"
                 >
@@ -45,6 +42,22 @@
 
             </div>
 
+            <!-- isMobile時divBar仍要存在, 因通用檢測時才會有效, 故isMobile時需於移至右側之外 -->
+            <div :style="`position:absolute; top:0px; right:${isMobile?-8:0}px; width:8px;`">
+
+                <div
+                    ref="divBar"
+                    class="sb"
+                    :style="`width:8px; height:${panelHeight}px; box-sizing:content-box; overflow-x:hidden; overflow-y:auto; opacity:${mouseEntering?barOpacityHover:barOpacity};`"
+                    @scroll="scrollBar"
+                >
+
+                    <div :style="`width:1px; height:${contentHeight}px;`"></div>
+
+                </div>
+
+            </div>
+
         </div>
 
     </div>
@@ -52,178 +65,76 @@
 
 <script>
 import get from 'lodash/get'
-import cloneDeep from 'lodash/cloneDeep'
-import isEle from 'wsemi/src/isEle.mjs'
-import domDragBarAndScroll from 'wsemi/src/domDragBarAndScroll.mjs'
-import color2hex from '../js/vuetifyColor.mjs'
+import isEqual from 'lodash/isEqual'
+// import cloneDeep from 'lodash/cloneDeep'
+import waitFun from 'wsemi/src/waitFun.mjs'
+import debounce from 'wsemi/src/debounce.mjs'
 import domResize from '../js/domResize.mjs'
 import domMutation from '../js/domMutation.mjs'
 
 
 /**
  * @vue-prop {Number} [viewHeightMax=400] 輸入顯示區最大高度，單位為px，預設400
- * @vue-prop {Number} [contentHeight=10000] 輸入內容最大高度，單位為px，預設10000
- * @vue-prop {Number} [scrollDelta=100] 輸入一次捲動高度，單位為px，預設100
- * @vue-prop {String} [barColor='rgba(0,0,0,0.15)'] 輸入捲軸內區塊顏色字串，預設'rgba(0,0,0,0.15)'
- * @vue-prop {String} [barColorHover='rgba(0,0,0,0.3)'] 輸入滑鼠移入時捲軸內區塊顏色字串，預設'rgba(0,0,0,0.3)'
- * @vue-prop {String} [barBackgroundColor='transparent'] 輸入捲軸背景顏色字串，預設'transparent'
- * @vue-prop {String} [barBackgroundColorHover='transparent'] 輸入滑鼠移入時捲軸背景顏色字串，預設'transparent'
- * @vue-prop {Number} [barWidth=8] 輸入捲軸區寬度，單位為px，預設8
- * @vue-prop {Number} [barHeightMin=50] 輸入捲軸內區塊最小高度，單位為px，預設50
- * @vue-prop {Number} [ratio=0] 輸入目前捲動比例數字，預設0
+ * @vue-prop {Number} [scrollTop=0] 輸入目前捲動值數字，預設0
+ * @vue-prop {Number} [barOpacity=0.6] 輸入捲軸透明度數字，預設0.6
+ * @vue-prop {Number} [barOpacityHover=1] 輸入滑鼠移入時捲軸透明度數字，預設1
  */
 export default {
     directives: {
         domresize: domResize(),
         dommutation: domMutation(),
     },
+    components: {
+    },
     props: {
         viewHeightMax: {
             type: Number,
             default: 400,
         },
-        contentHeight: {
-            type: Number,
-            default: 10000,
-        },
-        scrollDelta: {
+        scrollTop: {
             type: Number,
-            default: 100,
-        },
-        barColor: {
-            type: String,
-            default: 'rgba(0,0,0,0.15)',
-        },
-        barColorHover: {
-            type: String,
-            default: 'rgba(0,0,0,0.3)',
-        },
-        barBackgroundColor: {
-            type: String,
-            default: 'transparent',
-        },
-        barBackgroundColorHover: {
-            type: String,
-            default: 'transparent',
-        },
-        barWidth: {
-            type: Number,
-            default: 8,
+            default: 0,
         },
-        barHeightMin: {
+        barOpacity: {
             type: Number,
-            default: 50,
+            default: 0.6,
         },
-        ratio: {
+        barOpacityHover: {
             type: Number,
-            default: 0,
+            default: 1,
         },
     },
     data: function() {
         return {
-            das: null,
+            dbc: debounce(),
 
-            mouseEntering: false, //滑鼠移入中
-            ratioTrans: 0, //捲動比例
-            barPressY: null, //bar按下準備拖曳前y座標
-            nativeBarWidth: 100, //原生捲軸寬度, 預設給超大值避免初始化時顯示捲軸出來
-            barPanelPadding: 1, //捲軸內與區塊的y向內間距
-            scrollInforLast: null, //上次算得的捲軸資訊
-            scrollInforTemp: null, //要恢復上次捲軸位置時用暫存的捲軸資訊
-            timerScrollTop: null, //偵測顯示區捲軸變動的timer
+            nativeBarWidth: 16, //預設bar寬度, 先給大值避免初始化時會顯示原本bar條
 
-        }
-    },
-    mounted: function() {
-        //console.log('mounted')
-
-        let vo = this
-
-        //das
-        let das = domDragBarAndScroll(vo.$refs.divPanel, vo.$refs.divBar, {
-            getHeighRatio: () => vo.heighRatio,
-            //stopScrollPropagationForPanel: true, //禁止滑鼠捲動事件傳遞至外, 現已強制原生捲軸再攔截相關事件, 故不需要停用傳遞
-            //stopTouchDragPropagationForPanel: true, //禁止觸控拖曳事件傳遞至外, 現已強制原生捲軸再攔截相關事件, 故不需要停用傳遞
-        })
-        das.on('scrollPanel', vo.dgScrollPanel)
-        das.on('pressBar', vo.dgPressBar)
-        das.on('dragBar', vo.dgDragBar)
-        das.on('freeBar', vo.dgFreeBar)
+            useEmitEvent: true, //是否可觸發事件
+            mouseEntering: false,
+            mouseLoc: '',
 
-        //save
-        vo.das = das
+            viewHeight: 0, //外框區高度px
+            contentHeight: 2, //內容區高度px, 一定要給>=2值(至少可能渲染2border)才能避免初始化無高度導致無法觸發後續事件
 
-        //detect
-        vo.timerScrollTop = setInterval(() => {
+            ratio: 0,
+            scrollInfor: null,
 
-            //resetScrollTop, 因vue切換組件時若為共用狀態則mounted只會觸發1次, 此導致顯示區塊的scrollTop會自動被歸0但又不觸發scroll事件, 故需通過timer偵測並重設scrollTop
-            vo.resetScrollTop()
-
-        }, 100)
-
-    },
-    beforeDestroy: function() {
-        //console.log('beforeDestroy')
-
-        let vo = this
-
-        //clear
-        if (vo.das) {
-            vo.das.clear()
         }
-
-        //clearInterval
-        clearInterval(vo.timerScrollTop)
-
-    },
-    watch: {
-
-        viewHeightMax: function() {
-            //console.log('watch viewHeightMax')
-
-            let vo = this
-
-            //由watch處儲存捲軸資訊scrollInfor供後續恢復, 因放在computed會被vue偵測記憶體變動
-            vo.scrollInforTemp = cloneDeep(vo.scrollInforLast)
-
-        },
-
     },
     computed: {
 
-        changeRatio: function () {
-            //console.log('computed changeRatio')
+        changeScrollTop: function () {
+            //console.log('computed changeScrollTop')
 
             let vo = this
 
-            //ratioTrans
-            let ratioTrans = vo.ratio
-
-            //limit
-            ratioTrans = Math.max(ratioTrans, 0)
-            ratioTrans = Math.min(ratioTrans, 1)
-
-            //save
-            vo.ratioTrans = ratioTrans
+            //updateScrollTop
+            vo.updateScrollTop(vo.scrollTop)
 
             return ''
         },
 
-        changeViewHeightMax: function() {
-            //console.log('computed changeViewHeightMax')
-
-            let vo = this
-
-            //viewHeightMax for trigger
-            let viewHeightMax = vo.viewHeightMax
-
-            //keepRatioByChangeViewHeightMax
-            vo.keepRatioByChangeViewHeightMax()
-
-            vo.___viewHeightMax___ = viewHeightMax
-            return ''
-        },
-
         panelHeight: function () {
             //console.log('computed panelHeight')
 
@@ -232,512 +143,379 @@ export default {
             return Math.min(vo.contentHeight, vo.viewHeightMax)
         },
 
-        extHeight: function() {
-            //console.log('computed extHeight')
-
-            let vo = this
-
-            //放大比率(依照viewHeightMax)與增量
-            let r = 10 //桌機需高放大比率, 於複雜dom中比較有緩衝能平滑拖曳, 不容易觸發拖曳外層document
-            let d = 0
-            if (vo.nativeBarWidth <= 0) {
-                r = 0.2 //手機需低放大比率, 大值時拖曳會出現回彈效果使用者體驗比較好, 但會常觸發回彈導致無法拖曳
-                d = 2
-            }
-
-            //額外撐開高度, 最小上下留1px也就是需為viewHeightMax+2
-            let h = vo.viewHeightMax * r + d
-
-            return h
-        },
-
-        useEntering: function() {
-            //console.log('computed useEntering')
-
-            let vo = this
-
-            //滑鼠移入以及對捲軸按下正在拖曳中時, 都視為滑鼠移入狀態
-            return vo.mouseEntering || vo.barPressY
-        },
-
-        useBarColor: function() {
-            //console.log('computed useBarColor')
+        isMobile: function() {
+            //console.log('computed isMobile')
 
             let vo = this
 
-            if (vo.useEntering) {
-                return color2hex(vo.barColorHover)
-            }
-            return color2hex(vo.barColor)
+            return vo.nativeBarWidth <= 0
         },
 
-        useBarBackgroundColor: function() {
-            //console.log('computed useBarBackgroundColor')
-
+        contentHeightEff: function() {
             let vo = this
-
-            if (vo.useEntering) {
-                return color2hex(vo.barBackgroundColorHover)
-            }
-            return color2hex(vo.barBackgroundColor)
+            return Math.max(vo.contentHeight - vo.panelHeight, 0)
         },
 
-        heighRatio: function() {
-            //console.log('computed heighRatio')
-
+        viewTop: function() {
             let vo = this
-
-            //r, 顯示區與實際內容高度比, 此處只有domDragBarAndScroll會調用, 也就是使用者拖曳捲軸才觸發
-            let ch = vo.contentHeight
-            let r = vo.viewHeightMax / Math.max(ch, 1)
-
-            return r
+            return vo.ratio * vo.contentHeightEff
         },
 
-        barSize: function() {
-            //console.log('computed barSize')
-
+        viewBottom: function() {
             let vo = this
-
-            //r size ratio
-            let r = vo.viewHeightMax / vo.contentHeight
-
-            //barSize
-            let barSize = Math.max(r * vo.viewHeightMax, vo.barHeightMin)
-
-            return barSize
+            return vo.viewTop + vo.viewHeightMax
         },
 
-        barLoc: function() {
-            //console.log('computed barLoc')
-
-            let vo = this
-
-            return vo.ratioTrans * vo.viewHeightEff
-        },
+    },
+    methods: {
 
-        contentHeightEff: function() {
-            //console.log('computed contentHeightEff')
+        resizePanel: function(msg) {
+            // console.log('methods resizePanel', msg)
 
             let vo = this
 
-            //v
-            let v = vo.contentHeight - vo.viewHeightMax
-            v = Math.max(v, 0)
-
-            //triggerEvent, 若內容高度contentHeight或顯示區最大高度viewHeightMax變更則需要triggerEvent
-            vo.triggerEvent('changeHeight')
-
-            return v
-        },
-
-        viewHeightEff: function() {
-            //console.log('computed viewHeightEff')
+            //nativeBarWidth
+            let divDetect = get(vo, '$refs.divDetect')
+            if (divDetect) {
+
+                //save nativeBarWidth
+                let w = divDetect.offsetWidth - divDetect.clientWidth
+                if (vo.nativeBarWidth !== w) {
+                    // console.log('resizePanel 需更新nativeBarWidth', w, '<-', vo.nativeBarWidth)
+                    vo.nativeBarWidth = w
+                }
 
-            let vo = this
+            }
 
-            //v
-            let v = vo.viewHeightMax - vo.barSize - vo.barPanelPadding * 2
-            v = Math.max(v, 0)
+            //save
+            if (vo.viewHeight !== msg.snew.offsetHeight) {
+                // console.log('resizePanel 需更新viewHeight', msg.snew.offsetHeight, '<-', vo.viewHeight)
+                vo.viewHeight = msg.snew.offsetHeight
+            }
 
-            return v
-        },
+            //divShell
+            let divShell = get(vo, '$refs.divShell')
+            if (divShell) {
 
-        viewTop: function() {
-            //console.log('computed viewTop')
+                //emit scrollTop
+                vo.$emit('update:scrollTop', divShell.scrollTop)
 
-            let vo = this
-            return vo.ratioTrans * vo.contentHeightEff
-        },
-
-        viewBottom: function() {
-            //console.log('computed viewBottom')
+            }
 
-            let vo = this
+            //emit
+            vo.triggerEvent('resize', { ...msg, from: 'panel' })
 
-            return vo.viewTop + vo.viewHeightMax
         },
 
-        isMobile: function() {
-            //console.log('computed isMobile')
+        resizeShell: function(msg) {
+            // console.log('methods resizeShell', msg)
 
             let vo = this
 
-            return vo.nativeBarWidth <= 0
-        },
+            //divContent
+            let divContent = get(vo, '$refs.divContent')
+            if (divContent) {
+                // console.log('resizeShell divContent.offsetHeight', divContent.offsetHeight)
 
-        extWidth: function() {
-            //console.log('computed extWidth')
-
-            let vo = this
+                //save
+                if (vo.contentHeight !== divContent.offsetHeight) {
+                    // console.log('resizeShell 需更新contentHeight', divContent.offsetHeight, '<-', vo.contentHeight)
+                    vo.contentHeight = divContent.offsetHeight
+                }
 
-            //額外撐開寬度, 當手機瀏覽時會沒有原生捲軸寬度, 此時需額外撐開使捲軸隱藏
-            if (vo.isMobile) {
-                return 20
             }
-            return 0
-        },
-
-        fakeScrollTop: function() {
-            //console.log('computed fakeScrollTop')
-
-            let vo = this
 
-            let st
+            //divShell
+            let divShell = get(vo, '$refs.divShell')
+            if (divShell) {
 
-            //依照ratioTrans調整scrollTop
-            // if (vo.isMobile) {
-            //     st = vo.ratioTrans * vo.extHeight
-            // }
-            // else {
-            //     st = vo.extHeight / 2
-            // }
+                //emit scrollTop
+                vo.$emit('update:scrollTop', divShell.scrollTop)
 
-            // //resetScrollTopDelay
-            // vo.resetScrollTopDelay()
+            }
 
-            //固定scrollTop為extHeight/2, 支援桌機, 手機拖曳捲軸正常但拖曳內容較卡
-            st = vo.extHeight / 2
+            //emit
+            vo.triggerEvent('resize', { ...msg, from: 'shell' })
 
-            return st
         },
 
-    },
-    methods: {
-
-        scroll: function(e) {
-            //console.log('scroll', e)
+        mutation: function(msg) {
+            // console.log('methods mutation', msg)
 
             let vo = this
 
-            // //div
-            // let div = get(e, 'target')
+            //divContent
+            let divContent = get(vo, '$refs.divContent')
 
-            //resetScrollTop
-            vo.resetScrollTop()
+            //check
+            if (divContent) {
+                // console.log('mutation divContent.offsetHeight', divContent.offsetHeight)
 
-        },
+                //save
+                if (vo.contentHeight !== divContent.offsetHeight) {
+                    // console.log('mutation 需更新contentHeight', divContent.offsetHeight, '<-', vo.contentHeight)
+                    vo.contentHeight = divContent.offsetHeight
+                }
 
-        resetScrollTopDelay: function() {
-            //console.log('resetScrollTopDelay')
+            }
 
-            let vo = this
+            //updateRatio
+            vo.updateRatio()
 
-            //nextTick
-            vo.$nextTick(() => {
-                vo.resetScrollTop()
-            })
+            //emit
+            vo.triggerEvent('mutation', { ...msg, from: 'content' })
 
         },
 
-        resetScrollTop: function() {
-            //console.log('resetScrollTop')
+        updateRatio: function() {
+            // console.log('methods updateRatio')
 
             let vo = this
 
-            //div
-            let div = get(vo, '$refs.divPanel', null)
-
             //check
-            if (!isEle(div)) {
+            if (!vo.$refs.divShell) { //於async中組件切換時還是有可能消失
                 return
             }
 
-            //check
-            if (div.scrollTop !== vo.fakeScrollTop) {
-
-                //修改scrollTop, 使內容物捲軸位置置中可持續接收上下捲動與拖曳事件
-                div.scrollTop = vo.fakeScrollTop
-
+            //ratio
+            let ratio = 0
+            if (vo.contentHeightEff > 0) {
+                ratio = vo.$refs.divShell.scrollTop / vo.contentHeightEff
             }
 
+            //save
+            vo.ratio = ratio
+
         },
 
-        keepRatioByChangeViewHeightMax: function() {
-            //console.log('keepRatioByChangeViewHeightMax')
+        // updateScrollTopByRatio: function(r) {
+        //     // console.log('methods updateScrollTopByRatio', r)
 
-            let vo = this
+        //     let vo = this
 
-            //resetScrollTop, 因變更viewHeightMax會影響extHeight, 故需重設ScrollTop
-            vo.resetScrollTop()
+        //     //divShell
+        //     let divShell = get(vo, '$refs.divShell')
 
-            //nextTick
-            vo.$nextTick(() => {
+        //     //check
+        //     if (!divShell) {
+        //         return
+        //     }
 
-                //resumeRatio
-                vo.resumeRatio()
+        //     //divBar
+        //     let divBar = get(vo, '$refs.divBar')
 
-            })
+        //     //check
+        //     if (!divBar) {
+        //         return
+        //     }
 
-        },
+        //     //scrollTop
+        //     let h = vo.contentHeight - vo.panelHeight
+        //     let scrollTop = 0
+        //     if (h > 0) {
+        //         scrollTop = r * h
+        //     }
 
-        resumeRatio: function(si = null) {
-            // console.log('resumeRatio', si)
+        //     //update scrollTop
+        //     vo.$refs.divShell.scrollTop = scrollTop
+        //     vo.$refs.divBar.scrollTop = scrollTop
 
-            let vo = this
+        // },
 
-            //si
-            if (si === null) {
-                //若非外部調用直接傳入, 則使用組件自己儲存的scrollInforTemp
-                si = vo.scrollInforTemp
-            }
+        updateScrollTop: function(scrollTop) {
+            // console.log('methods updateScrollTop', scrollTop)
 
-            //check, 因vue-cli編譯會重置組件導致scrollInforTemp恢復初始值null
-            if (si === null) {
-                return
-            }
+            let vo = this
 
-            //重算ratioTrans
-            let ratioTrans = 0
-            if (vo.contentHeight > 0 && si.ch > 0) { //已有內容資料
-
-                //內容高度變少
-                if (vo.contentHeight < si.ch) {
-
-                    //內容高度小於等於當前視窗高度
-                    if (vo.contentHeight <= vo.viewHeightMax) {
-                        ratioTrans = 0
-                        //console.log('內容高度變少, 內容高度小於當前視窗高度故改為置頂, ratioTrans=', ratioTrans)
-                    }
-                    // else if (si.r === 0) { //置底(si.r === 1)不需維持避免內容撐開過多時無法固定畫面於原本瀏覽處
-                    //     ratioTrans = si.r
-                    //     //console.log('內容高度變少, 原本為置頂故需維持, ratioTrans=', ratioTrans)
-                    // }
-                    //內容高度大於當前視窗高度
-                    else {
-                        ratioTrans = si.t / (vo.contentHeight - vo.viewHeightMax)
-                        //console.log('內容高度變少, 內容高度大於當前視窗高度, ratioTrans=', ratioTrans, si.t, vo.contentHeight, vo.viewHeightMax)
-                    }
+            async function core() {
 
-                }
-                //內容高度變高或不變
-                else {
-
-                    //內容高度小於等於當前視窗高度
-                    if (vo.contentHeight <= vo.viewHeightMax) {
-                        ratioTrans = 0
-                        //console.log('內容高度變高或不變, 內容高度小於當前視窗高度故改為置頂, ratioTrans=', ratioTrans)
-                    }
-                    // else if (si.r === 0) { //置底(si.r === 1)不需維持避免內容撐開過多時無法固定畫面於原本瀏覽處
-                    //     ratioTrans = si.r
-                    //     //console.log('內容高度變高或不變, 原本為置頂故需維持, ratioTrans=', ratioTrans)
-                    // }
-                    //內容高度大於當前視窗高度
-                    else {
-                        ratioTrans = si.t / (vo.contentHeight - vo.viewHeightMax)
-                        //console.log('內容高度變高或不變, 內容高度大於當前視窗高度, ratioTrans=', ratioTrans, si.t, vo.contentHeight, vo.viewHeightMax)
-                    }
+                //wait divShell與divBar, 組件初始化時會先觸發computed才會有實體元素出現, 故得用waitFun等待
+                await waitFun(() => {
+                    return vo.$refs.divShell !== undefined && vo.$refs.divBar !== undefined
+                }, { timeInterval: 20 })
 
+                //update scrollTop
+                if (vo.$refs.divShell) { //於async中組件切換時還是有可能消失
+                    vo.$refs.divShell.scrollTop = scrollTop
+                }
+                if (vo.$refs.divBar) { //於async中組件切換時還是有可能消失
+                    vo.$refs.divBar.scrollTop = scrollTop
                 }
 
             }
 
-            //updateRatioTrans
-            vo.updateRatioTrans(ratioTrans)
+            //core
+            core()
+                .catch((err) => {
+                    console.log(err)
+                })
 
         },
 
-        resize: function(msg) {
-            //console.log('methods resize', msg)
+        updateScrollInfor: function() {
+            //console.log('methods updateScrollInfor')
 
             let vo = this
 
-            //nativeBarWidth
-            let divPanel = get(vo, '$refs.divPanel')
-            if (divPanel) { //未顯示組件會無
-
-                //nativeBarWidth
-                let nativeBarWidth = vo.$refs.divPanel.offsetWidth - vo.$refs.divPanel.clientWidth
-
-                //save
-                vo.nativeBarWidth = nativeBarWidth
-
+            //check
+            if (!vo.$refs.divShell) { //於async中組件切換時還是有可能消失
+                return
             }
 
-            //resetScrollTop, 初始化、顯示、嵌入彈窗出現元素或resize時就需重設ScrollTop
-            vo.resetScrollTop()
-
-            //triggerEvent, resize觸發事件
-            vo.triggerEvent('resize')
-
-            // //emit, 有triggerEvent故取消emit
-            // vo.$emit('resize', msg)
-
-        },
-
-        mutation: function(msg) {
-            //console.log('methods mutation', msg)
-
-            let vo = this
+            //scrollInfor
+            let scrollInfor = {
+                r: vo.ratio,
+                sti: vo.scrollTop, //輸入給予scrollTop
+                stn: vo.$refs.divShell.scrollTop, //目前scrollTop, 要等emit scrollTop出去後才會與sti同值
+                dir: vo.scrollTop > vo.$refs.divShell.scrollTop ? 'up' : 'down', //判斷是往上還往下捲
+                t: vo.viewTop,
+                b: vo.viewBottom,
+                ch: vo.contentHeight,
+                che: vo.contentHeightEff,
+                // ph: vo.panelHeight,
+            }
 
-            //triggerEvent, 內容slot有dom變更時觸發事件
-            vo.triggerEvent('mutation')
+            //save
+            if (!isEqual(vo.scrollInfor, scrollInfor)) {
+                vo.scrollInfor = scrollInfor
+            }
 
         },
 
-        updateRatioTrans: function(ratioTrans) {
-            //console.log('methods updateRatioTrans', ratioTrans)
+        scrollShell: function(ev) {
+            // console.log('methods scrollShell', ev)
 
             let vo = this
 
-            //limit
-            ratioTrans = Math.max(ratioTrans, 0)
-            ratioTrans = Math.min(ratioTrans, 1)
-
             //check
-            if (vo.contentHeightEff === 0) {
-                ratioTrans = 0
+            if (vo.mouseLoc === '') {
+                vo.mouseLoc = 'enter shell'
             }
-
-            //changed
-            let changed = vo.ratioTrans !== ratioTrans
-            if (changed) {
-
-                //ratioTrans
-                vo.ratioTrans = ratioTrans
-
-                //triggerEvent, 捲動觸發事件
-                vo.triggerEvent('scroll')
-
+            if (vo.mouseLoc !== 'enter shell') {
+                return
             }
+            // console.log('scrollShell')
 
-            return changed
-        },
-
-        dgPressBar: function({ clientY }) {
-            //console.log('methods dgPressBar', clientY)
-
-            let vo = this
+            //divShell
+            let divShell = get(vo, '$refs.divShell')
 
-            //save clientY
-            if (clientY) {
+            //check
+            if (!divShell) {
+                return
+            }
 
-                //barPressY
-                vo.barPressY = clientY //e.clientY
+            //divBar
+            let divBar = get(vo, '$refs.divBar')
 
+            //check
+            if (!divBar) {
+                return
             }
 
-        },
+            //sync divBar
+            vo.$refs.divBar.scrollTop = vo.$refs.divShell.scrollTop
 
-        dgDragBar: function({ clientY }) {
-            //console.log('methods dgDragBar', clientY)
+            //emit scrollTop
+            vo.$emit('update:scrollTop', vo.$refs.divShell.scrollTop)
 
-            let vo = this
+            //updateRatio
+            vo.updateRatio()
 
-            //d
-            let d = clientY - vo.barPressY //e.clientY
+            //emit
+            vo.triggerEvent('scroll', { ev, from: 'shell' })
 
-            //deltaRatio
-            let deltaRatio = d / vo.viewHeightEff
+            // //updateScrollInfor
+            // vo.updateScrollInfor()
 
-            //scrollByDeltaRatio
-            vo.scrollByDeltaRatio(deltaRatio)
+            // //emit
+            // vo.triggerEvent('scroll-infor', { ...vo.scrollInfor, from: 'shell' })
 
-            //update
-            vo.barPressY = clientY //e.clientY
+            //clear mouseLoc
+            vo.dbc(() => {
+                // console.log('scrollShell clear mouseLoc')
+                vo.mouseLoc = ''
+            })
 
         },
 
-        dgFreeBar: function() {
-            //console.log('methods dgFreeBar')
+        scrollBar: function(ev) {
+            // console.log('methods scrollBar', ev)
 
             let vo = this
 
-            //barPressY
-            vo.barPressY = null
-
-            //triggerEvent, 拖曳時有些外部組件處理過慢, 導致節點位置未更新完畢, 故於放掉滑鼠按鍵時triggerEvent, 使外部組件再次接收事件進行更新節點
-            vo.triggerEvent('dgFreeBar')
-
-        },
-
-        getScrollInfor: function(from) {
-            //console.log('methods getScrollInfor', from)
+            //check
+            if (vo.mouseLoc === '') {
+                vo.mouseLoc = 'enter bar'
+            }
+            if (vo.mouseLoc !== 'enter bar') {
+                return
+            }
+            // console.log('scrollBar')
 
-            let vo = this
+            //divShell
+            let divShell = get(vo, '$refs.divShell')
 
-            //scrollInfor
-            let scrollInfor = {
-                from,
-                r: vo.ratioTrans,
-                t: vo.viewTop,
-                b: vo.viewBottom,
-                ch: vo.contentHeight,
+            //check
+            if (!divShell) {
+                return
             }
 
-            return scrollInfor
-        },
+            //divBar
+            let divBar = get(vo, '$refs.divBar')
 
-        triggerEvent: function(from) {
-            // console.log('methods triggerEvent', from)
+            //check
+            if (!divBar) {
+                return
+            }
 
-            let vo = this
+            //sync divShell
+            vo.$refs.divShell.scrollTop = vo.$refs.divBar.scrollTop
 
-            //nextTick, 因為外部可以因變更而呼叫triggerEvent, throttle第1次觸發是直接呼叫執行, 導致還沒收到外部傳入數據就由當前資訊emit出去
-            vo.$nextTick(() => {
+            //emit scrollTop
+            vo.$emit('update:scrollTop', vo.$refs.divShell.scrollTop)
 
-                //scrollInfor, 計算捲軸資訊
-                let scrollInfor = vo.getScrollInfor(from)
+            //updateRatio
+            vo.updateRatio()
 
-                //emit ratio
-                vo.$emit('update:ratio', vo.ratioTrans)
+            //emit
+            vo.triggerEvent('scroll', { ev, from: 'bar' })
 
-                //emit from
-                if (from) {
-                    vo.$emit(from, scrollInfor)
-                }
+            // //updateScrollInfor
+            // vo.updateScrollInfor()
 
-                //emit change
-                vo.$emit('change', scrollInfor)
-
-                //save scrollInforLast, 紀錄捲軸資訊, 供恢復捲軸資訊之用
-                vo.scrollInforLast = cloneDeep(scrollInfor)
+            // //emit
+            // vo.triggerEvent('scroll-infor', { ...vo.scrollInfor, from: 'bar' })
 
+            //clear mouseLoc
+            vo.dbc(() => {
+                // console.log('scrollBar clear mouseLoc')
+                vo.mouseLoc = ''
             })
 
         },
 
-        scrollByDeltaRatio: function(deltaRatio) {
-            //console.log('methods scrollByDeltaRatio', deltaRatio)
+        triggerEvent: function(name, msg) {
+            // console.log('methods triggerEvent', name, msg)
 
             let vo = this
 
-            //ratioTrans
-            let ratioTrans = vo.ratioTrans
-
-            //update
-            if (ratioTrans >= 0 && ratioTrans <= 1) {
-                ratioTrans += deltaRatio
+            //check
+            if (!vo.useEmitEvent) {
+                return
             }
 
-            //updateRatioTrans
-            vo.updateRatioTrans(ratioTrans)
+            //emit
+            vo.$emit(name, msg)
 
-        },
-
-        scrollByDelta: function(delta) {
-            //console.log('methods scrollByDelta', delta)
+            //updateScrollInfor
+            vo.updateScrollInfor()
 
-            let vo = this
-
-            //deltaRatio
-            let deltaRatio = delta / vo.contentHeight
-
-            //scrollByDeltaRatio
-            vo.scrollByDeltaRatio(deltaRatio)
-
-        },
-
-        dgScrollPanel: function({ ratioY }) {
-            //console.log('methods dgScrollPanel', ratioY)
-
-            let vo = this
-
-            //delta
-            let delta = ratioY * vo.scrollDelta
-
-            //scrollByDelta
-            vo.scrollByDelta(delta)
+            //emit
+            vo.$emit('change-infor', {
+                evName: name,
+                evMsg: msg,
+                ...vo.scrollInfor,
+            })
 
         },
 
@@ -746,23 +524,24 @@ export default {
 </script>
 
 <style scoped>
-
-/* 針對Chrome,Edge,Opera,Safari把捲軸顏色改透明, 避免有時渲染問題出現捲軸左側 */
-.clsPanel::-webkit-scrollbar {
-    width: 1em;
+.sb {
+    transition: opacity 0.3s;
+    /* Works on Firefox */
+    scrollbar-width: thin;
+    scrollbar-color: rgba(0,0,0,0.3) transparent;
 }
-.clsPanel::-webkit-scrollbar-thumb {
-    background-color: transparent;
+/* Works on Chrome, Edge, and Safari */
+.sb::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
 }
-.clsPanel::-webkit-scrollbar-track {
-    box-shadow: transparent;
-}
-.clsPanel::-webkit-scrollbar-track-piece{
+.sb::-webkit-scrollbar-track {
     background: transparent;
 }
-.clsPanel::-webkit-scrollbar-button{
-    background: transparent;
+.sb::-webkit-scrollbar-thumb {
+    background-color: rgba(0,0,0,0.3);
+    border-radius: 20px;
+    border: 3px solid transparent;
 }
-
 </style>