perf: scrollbar

resources/assets/js/app.js

@@ -40,6 +40,7 @@ import TableAction from './components/TableAction.vue'
 import QuickEdit from './components/QuickEdit.vue'
 import UserAvatar from './components/UserAvatar.vue'
 import ImgView from './components/ImgView.vue'
+import Scrollbar from './components/Scrollbar'
 
 Vue.component('PageTitle', PageTitle);
 Vue.component('Loading', Loading);
@@ -49,6 +50,7 @@ Vue.component('TableAction', TableAction);
 Vue.component('QuickEdit', QuickEdit);
 Vue.component('UserAvatar', UserAvatar);
 Vue.component('ImgView', ImgView);
+Vue.component('Scrollbar', Scrollbar);
 
 import {
     Avatar,

resources/assets/js/components/RightBottom.vue

@@ -29,7 +29,9 @@
                 </div>
                 <div v-if="$Platform === 'mac'" class="notification-tip">{{$L('离最新版本只有一步之遥了！重新启动应用即可完成更新。')}}</div>
             </div>
-            <MarkdownPreview class="notification-body scrollbar-overlay" :initialValue="updateNote"/>
+            <Scrollbar class-name="notification-body">
+                <MarkdownPreview :initialValue="updateNote"/>
+            </Scrollbar>
             <div slot="footer" class="adaption">
                 <Button type="default" @click="updateShow=false">{{$L('稍后')}}</Button>
                 <Button type="primary" :loading="updateIng" @click="updateQuitAndInstall">{{$L($Platform === 'mac' ? '重新启动' : '立即升级')}}</Button>

resources/assets/js/components/Scrollbar/index.js

@@ -0,0 +1,419 @@
+import {supportsTouch, toInt} from "./lib/util";
+import * as CSS from './lib/css';
+
+export default {
+    name: 'Scrollbar',
+    props: {
+        tag: {
+            type: String,
+            default: 'div'
+        },
+        className: {
+            type: String,
+            default: ''
+        },
+        enableX: {
+            type: Boolean,
+            default: false
+        },
+        enableY: {
+            type: Boolean,
+            default: true
+        },
+        hideBar: {
+            type: Boolean,
+            default: false
+        },
+        minSize: {
+            type: Number,
+            default: 20
+        },
+    },
+    data() {
+        return {
+            isReady: false,
+
+            scrollingX: false,
+            scrollingY: false,
+
+            moveingX: false,
+            moveingY: false,
+
+            containerWidth: null,
+            containerHeight: null,
+
+            contentWidth: null,
+            contentHeight: null,
+            contentOverflow: {
+                x: null,
+                y: null,
+            },
+
+            thumbYHeight: null,
+            thumbYTop: null,
+            thumbXWidth: null,
+            thumbXLeft: null,
+
+            lastScrollTop: 0,
+            lastScrollLeft: 0,
+
+            timeouts: {},
+        }
+    },
+    computed: {
+        containerClass() {
+            const classList = ['scrollbar-container'];
+            if (supportsTouch) {
+                classList.push('scrollbar-touch')
+            } else {
+                classList.push('scrollbar-desktop')
+            }
+            if (this.contentWidth > this.containerWidth && this.contentOverflow.x !== 'hidden' && this.enableX) {
+                classList.push('scrollbar-active-x')
+            }
+            if (this.contentHeight > this.containerHeight && this.contentOverflow.y !== 'hidden' && this.enableY) {
+                classList.push('scrollbar-active-y')
+            }
+            if (this.scrollingX) {
+                classList.push('scrollbar-scrolling-x')
+            }
+            if (this.scrollingY) {
+                classList.push('scrollbar-scrolling-y')
+            }
+            if (this.moveingX) {
+                classList.push('scrollbar-moveing-x')
+            }
+            if (this.moveingY) {
+                classList.push('scrollbar-moveing-y')
+            }
+            if (this.hideBar || !this.isReady) {
+                classList.push('scrollbar-hidebar')
+            }
+            return classList
+        },
+        contentClass({className, enableX, enableY}) {
+            const classList = ['scrollbar-content'];
+            if (className) {
+                classList.push(className)
+            }
+            if (!enableX) {
+                classList.push('scrollbar-disable-x')
+            }
+            if (!enableY) {
+                classList.push('scrollbar-disable-y')
+            }
+            return classList
+        }
+    },
+    mounted() {
+        this.$nextTick(() => {
+            this.updateBase()
+        });
+    },
+    updated() {
+        this.$nextTick(() => {
+            this.updateGeometry(false);
+        });
+    },
+    methods: {
+        /**
+         * 滚动区域信息
+         * @returns {{scale: number, scrollY: *, scrollE: number}}
+         */
+        scrollInfo() {
+            const scroller = $A(this.$refs.content);
+            const wInnerH = Math.round(scroller.innerHeight());
+            const wScrollY = scroller.scrollTop();
+            const bScrollH = this.$refs.content.scrollHeight;
+            return {
+                scale: wScrollY / (bScrollH - wInnerH),     //已滚动比例
+                scrollY: wScrollY,                          //滚动的距离
+                scrollE: bScrollH - wInnerH - wScrollY,     //与底部距离
+            }
+        },
+
+        /**
+         * 滚动区域元素
+         * @returns {Vue | Element | (Vue | Element)[]}
+         */
+        scrollElement() {
+            return this.$refs.content;
+        },
+
+        /**
+         * 从滚动区域获取指定元素
+         * @param el
+         * @returns {*}
+         */
+        querySelector(el) {
+            return this.$refs.content && this.$refs.content.querySelector(el)
+        },
+
+        /**
+         * 更新基础信息
+         */
+        updateBase() {
+            if (supportsTouch) {
+                return;
+            }
+            const containerStyles = CSS.get(this.$refs.container);
+            const contentStyles = CSS.get(this.$refs.content);
+
+            CSS.set(this.$refs.trackX, {
+                left: toInt(containerStyles.paddingLeft) + toInt(contentStyles.marginLeft),
+                right: toInt(containerStyles.paddingRight) + toInt(contentStyles.marginRight),
+                bottom: toInt(containerStyles.paddingBottom) + toInt(contentStyles.marginBottom),
+            });
+            CSS.set(this.$refs.trackY, {
+                top: toInt(containerStyles.paddingTop) + toInt(contentStyles.marginTop),
+                bottom: toInt(containerStyles.paddingBottom) + toInt(contentStyles.marginBottom),
+                right: toInt(containerStyles.paddingRight) + toInt(contentStyles.marginRight),
+            });
+
+            this.contentOverflow = {
+                x: contentStyles.overflowX,
+                y: contentStyles.overflowY,
+            }
+        },
+
+        /**
+         * 更新滚动条
+         * @param scrolling 是否正在滚动
+         */
+        updateGeometry(scrolling) {
+            if (supportsTouch) {
+                return;
+            }
+
+            const element = this.$refs.content;
+            if (!element) {
+                return;
+            }
+
+            const scrollTop = Math.floor(element.scrollTop);
+            const rect = element.getBoundingClientRect();
+
+            this.containerWidth = Math.round(rect.width);
+            this.containerHeight = Math.round(rect.height);
+            this.contentWidth = element.scrollWidth;
+            this.contentHeight = element.scrollHeight;
+
+            this.thumbXWidth = Math.max(toInt((this.containerWidth * this.containerWidth) / this.contentWidth), this.minSize);
+            this.thumbXLeft = toInt((element.scrollLeft * (this.containerWidth - this.thumbXWidth)) / (this.contentWidth - this.containerWidth));
+            this.thumbYHeight = Math.max(toInt((this.containerHeight * this.containerHeight) / this.contentHeight), this.minSize);
+            this.thumbYTop = toInt((scrollTop * (this.containerHeight - this.thumbYHeight)) / (this.contentHeight - this.containerHeight));
+
+            CSS.set(this.$refs.thumbX, {
+                left: this.thumbXLeft,
+                width: this.thumbXWidth,
+            });
+            CSS.set(this.$refs.thumbY, {
+                top: this.thumbYTop,
+                height: this.thumbYHeight,
+            });
+
+            if (scrolling) {
+                this.scrollingX = this.lastScrollLeft !== element.scrollLeft;
+                this.scrollingY = this.lastScrollTop !== element.scrollTop;
+
+                this.lastScrollTop = element.scrollTop;
+                this.lastScrollLeft = element.scrollLeft;
+
+                this.timeouts['scroll'] && clearTimeout(this.timeouts['scroll']);
+                this.timeouts['scroll'] = setTimeout(() => {
+                    this.scrollingX = false;
+                    this.scrollingY = false;
+                }, 1000)
+            }
+        },
+
+        /**
+         * 鼠标移入事件（单次）
+         */
+        onContainerMouseMove() {
+            setTimeout(() => {
+                if (this.isReady) {
+                    return
+                }
+                this.updateGeometry(true);
+                this.isReady = true
+            }, 300)
+        },
+
+        /**
+         * 滚动区域滚动事件
+         * @param e
+         */
+        onContentScroll(e) {
+            this.updateGeometry(true);
+            this.$emit('on-scroll', e);
+            this.isReady = true
+        },
+
+        /**
+         * 内容区域鼠标进入事件
+         */
+        onContentMouseenter() {
+            this.updateBase();
+            this.updateGeometry(false);
+        },
+
+        /**
+         * 轨道区域(X)鼠标按下事件
+         * @param e
+         */
+        onTrackXMouseDown(e) {
+            if (supportsTouch) {
+                return;
+            }
+            const element = this.$refs.content;
+            const rect = this.$refs.trackX.getBoundingClientRect();
+
+            const positionLeft = e.pageX - window.scrollX - rect.left;
+            const direction = positionLeft > this.thumbXLeft ? 1 : -1;
+
+            element.scrollLeft += direction * this.containerWidth;
+            this.updateGeometry(true);
+
+            e.stopPropagation();
+        },
+
+        /**
+         * 轨道区域(Y)鼠标按下事件
+         * @param e
+         */
+        onTrackYMouseDown(e) {
+            if (supportsTouch) {
+                return;
+            }
+            const element = this.$refs.content;
+            const rect = this.$refs.trackY.getBoundingClientRect();
+
+            const positionTop = e.pageY - window.scrollY - rect.top;
+            const direction = positionTop > this.thumbYTop ? 1 : -1;
+
+            element.scrollTop += direction * this.containerHeight;
+            this.updateGeometry(true);
+
+            e.stopPropagation();
+        },
+
+        /**
+         * 滚动条(X)鼠标按下事件
+         * @param e
+         */
+        onThumbXMouseDown(e) {
+            if (supportsTouch) {
+                return;
+            }
+            const element = this.$refs.content;
+            const rect = element.getBoundingClientRect();
+            const scrollLeft = element.scrollLeft;
+            const pageX = e.pageX - window.scrollX;
+
+            const mouseMoveHandler = (e) => {
+                const diff = e.pageX - pageX;
+                element.scrollLeft = scrollLeft + diff * this.contentWidth / rect.width;
+            };
+
+            const mouseUpHandler = () => {
+                this.timeouts['moveX'] = setTimeout(() => {
+                    this.moveingX = false;
+                }, 100);
+                document.removeEventListener('mousemove', mouseMoveHandler);
+                document.removeEventListener('mouseup', mouseUpHandler);
+            };
+            this.moveingX = true;
+            this.timeouts['moveX'] && clearTimeout(this.timeouts['moveX']);
+
+            document.addEventListener('mousemove', mouseMoveHandler);
+            document.addEventListener('mouseup', mouseUpHandler);
+
+            e.preventDefault();
+            e.stopPropagation();
+        },
+
+        /**
+         * 滚动条(Y)鼠标按下事件
+         * @param e
+         */
+        onThumbYMouseDown(e) {
+            if (supportsTouch) {
+                return;
+            }
+            const element = this.$refs.content;
+            const rect = element.getBoundingClientRect();
+            const scrollTop = element.scrollTop;
+            const pageY = e.pageY - window.scrollY;
+
+            const mouseMoveHandler = (e) => {
+                const diff = e.pageY - pageY;
+                element.scrollTop = scrollTop + diff * this.contentHeight / rect.height;
+            };
+
+            const mouseUpHandler = () => {
+                this.timeouts['moveY'] = setTimeout(() => {
+                    this.moveingY = false;
+                }, 100);
+                document.removeEventListener('mousemove', mouseMoveHandler);
+                document.removeEventListener('mouseup', mouseUpHandler);
+            };
+            this.moveingY = true;
+            this.timeouts['moveY'] && clearTimeout(this.timeouts['moveY']);
+
+            document.addEventListener('mousemove', mouseMoveHandler);
+            document.addEventListener('mouseup', mouseUpHandler);
+
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    },
+    render(h) {
+        return h('div', {
+            ref: 'container',
+            class: this.containerClass,
+            on: {
+                '~mousemove': this.onContainerMouseMove,
+            }
+        }, [
+            h(this.tag, {
+                ref: 'content',
+                class: this.contentClass,
+                on: {
+                    scroll: this.onContentScroll,
+                    mouseenter: this.onContentMouseenter,
+                }
+            }, this.$slots.default),
+            h('div', {
+                ref: 'trackX',
+                class: 'scrollbar-track-x',
+                on: {
+                    mousedown: this.onTrackXMouseDown
+                }
+            }, [
+                h('div', {
+                    ref: 'thumbX',
+                    class: 'scrollbar-thumb-x',
+                    on: {
+                        mousedown: this.onThumbXMouseDown
+                    }
+                }),
+            ]),
+            h('div', {
+                ref: 'trackY',
+                class: 'scrollbar-track-y',
+                on: {
+                    mousedown: this.onTrackYMouseDown
+                }
+            }, [
+                h('div', {
+                    ref: 'thumbY',
+                    class: 'scrollbar-thumb-y',
+                    on: {
+                        mousedown: this.onThumbYMouseDown
+                    }
+                })
+            ]),
+        ])
+    }
+}

resources/assets/js/components/Scrollbar/lib/css.js

@@ -0,0 +1,19 @@
+export function get(element) {
+    if (element) {
+        return getComputedStyle(element);
+    }
+    return {};
+}
+
+export function set(element, obj) {
+    if (element) {
+        for (const key in obj) {
+            let val = obj[key];
+            if (typeof val === 'number') {
+                val = `${val}px`;
+            }
+            element.style[key] = val;
+        }
+    }
+    return element;
+}

resources/assets/js/components/Scrollbar/lib/util.js

@@ -0,0 +1,9 @@
+export function toInt(x) {
+    return parseInt(x, 10) || 0;
+}
+
+export const supportsTouch = typeof window !== 'undefined' &&
+    ('ontouchstart' in window ||
+        ('maxTouchPoints' in window.navigator &&
+            window.navigator.maxTouchPoints > 0) ||
+        (window.DocumentTouch && document instanceof window.DocumentTouch));

resources/assets/js/components/Scrollbar/style.scss

@@ -0,0 +1,156 @@
+@import 'perfect-scrollbar/css/perfect-scrollbar.css';
+
+.scrollbar-container {
+    flex: 1;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+
+    /*
+     * 触摸设备隐藏自定义滚动条
+     */
+    &.scrollbar-touch {
+        .scrollbar-track-x,
+        .scrollbar-track-y {
+            display: none;
+        }
+    }
+
+    /*
+     * 桌面设备隐藏系统滚动条
+     */
+    &.scrollbar-desktop,
+    &.scrollbar-hidebar {
+        .scrollbar-content {
+            &::-webkit-scrollbar {
+                display: none;
+                width: 0;
+                height: 0;
+            }
+        }
+    }
+
+    /*
+     * 隐藏滚动条
+     */
+    &.scrollbar-hidebar {
+        .scrollbar-track-x,
+        .scrollbar-track-y {
+            opacity: 0 !important;
+        }
+    }
+
+    /*
+     * 滚动条轨道样式
+     */
+    .scrollbar-track-x,
+    .scrollbar-track-y {
+        position: absolute;
+        z-index: 101;
+        display: block;
+        visibility: hidden;
+        opacity: 0;
+        transition: background-color .2s linear, opacity .2s linear;
+    }
+
+    .scrollbar-track-x {
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: 15px;
+    }
+
+    .scrollbar-track-y {
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: 15px;
+    }
+
+    &.scrollbar-active-x .scrollbar-track-x,
+    &.scrollbar-active-y .scrollbar-track-y {
+        visibility: visible;
+        background-color: transparent;
+    }
+
+    &:hover > .scrollbar-track-x,
+    &:hover > .scrollbar-track-y,
+    &.scrollbar-scrolling-x .scrollbar-track-x,
+    &.scrollbar-scrolling-y .scrollbar-track-y {
+        opacity: 0.6;
+    }
+
+    .scrollbar-track-x:hover,
+    .scrollbar-track-y:hover,
+    .scrollbar-track-x:focus,
+    .scrollbar-track-y:focus,
+    &.scrollbar-moveing-x .scrollbar-track-x,
+    &.scrollbar-moveing-y .scrollbar-track-y {
+        background-color: #eee;
+        opacity: 0.9;
+    }
+
+    /*
+     * 滚动条样式
+     */
+    .scrollbar-thumb-x,
+    .scrollbar-thumb-y {
+        position: absolute;
+        z-index: 102;
+        background-color: #aaa;
+        border-radius: 6px;
+        transform: translateZ(0);
+    }
+
+    .scrollbar-thumb-x {
+        transition: background-color .2s linear, height .2s ease-in-out;
+        height: 6px;
+        bottom: 2px;
+    }
+
+    .scrollbar-thumb-y {
+        transition: background-color .2s linear, width .2s ease-in-out;
+        width: 6px;
+        right: 2px;
+    }
+
+    .scrollbar-track-x:hover > .scrollbar-thumb-x,
+    .scrollbar-track-x:focus > .scrollbar-thumb-x,
+    &.scrollbar-moveing-x .scrollbar-thumb-x {
+        background-color: #999;
+        height: 11px;
+    }
+
+    .scrollbar-track-y:hover > .scrollbar-thumb-y,
+    .scrollbar-track-y:focus > .scrollbar-thumb-y,
+    &.scrollbar-moveing-y .scrollbar-thumb-y {
+        background-color: #999;
+        width: 11px;
+    }
+
+    /*
+     * 内容区域样式
+     */
+    .scrollbar-content {
+        height: 100%;
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+
+        &.scrollbar-disable-x {
+            overflow-x: hidden;
+        }
+
+        &.scrollbar-disable-y {
+            overflow-y: hidden;
+        }
+    }
+}
+
+/*
+ * 隐藏系统滚动条
+ */
+.scrollbar-hidden {
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}

resources/assets/js/components/ScrollerY.vue

@@ -1,152 +0,0 @@
-<template>
-    <div ref="scrollerView" class="app-scroller-y" :class="[static ? 'static' : '']">
-        <slot/>
-        <div ref="bottom" class="app-scroller-bottom"></div>
-    </div>
-</template>
-
-<script>
-export default {
-    name: 'ScrollerY',
-    props: {
-        static: {
-            type: Boolean,
-            default: false
-        },
-        autoBottom: {
-            type: Boolean,
-            default: false
-        },
-        autoRecovery: {
-            type: Boolean,
-            default: true
-        },
-        autoRecoveryAnimate: {
-            type: Boolean,
-            default: false
-        },
-    },
-
-    data() {
-        return {
-            scrollY: 0,
-            scrollDiff: 0,
-            autoInterval: null,
-        }
-    },
-
-    mounted() {
-        this.openInterval()
-        this.$nextTick(this.initScroll);
-    },
-
-    activated() {
-        this.openInterval()
-        this.recoveryScroll()
-    },
-
-    destroyed() {
-        this.closeInterval()
-    },
-
-    deactivated() {
-        this.closeInterval()
-    },
-
-    methods: {
-        initScroll() {
-            this.autoToBottom();
-            let scrollListener = typeof this.$listeners['on-scroll'] === "function";
-            let scrollerView = $A(this.$refs.scrollerView);
-            scrollerView.scroll(() => {
-                let wInnerH = Math.round(scrollerView.innerHeight());
-                let wScrollY = scrollerView.scrollTop();
-                let bScrollH = this.$refs.scrollerView.scrollHeight;
-                this.scrollY = wScrollY;
-                if (scrollListener) {
-                    let direction = 'static';
-                    let directionreal = 'static';
-                    if (this.scrollDiff - wScrollY > 50) {
-                        this.scrollDiff = wScrollY;
-                        direction = 'down';
-                    } else if (this.scrollDiff - wScrollY < -100) {
-                        this.scrollDiff = wScrollY;
-                        direction = 'up';
-                    }
-                    if (this.scrollDiff - wScrollY > 1) {
-                        this.scrollDiff = wScrollY;
-                        directionreal = 'down';
-                    } else if (this.scrollDiff - wScrollY < -1) {
-                        this.scrollDiff = wScrollY;
-                        directionreal = 'up';
-                    }
-                    this.$emit('on-scroll', {
-                        scale: wScrollY / (bScrollH - wInnerH),     //已滚动比例
-                        scrollY: wScrollY,                          //滚动的距离
-                        scrollE: bScrollH - wInnerH - wScrollY,     //与底部距离
-                        direction: direction,                       //滚动方向
-                        directionreal: directionreal,               //滚动方向（即时）
-                    });
-                }
-            });
-        },
-
-        recoveryScroll() {
-            if (this.autoRecovery && (this.scrollY > 0 || this.autoBottom)) {
-                this.$nextTick(() => {
-                    if (this.autoBottom) {
-                        this.autoToBottom();
-                    } else {
-                        this.scrollTo(this.scrollY, this.autoRecoveryAnimate);
-                    }
-                });
-            }
-        },
-
-        openInterval() {
-            this.autoToBottom();
-            this.autoInterval && clearInterval(this.autoInterval);
-            this.autoInterval = setInterval(this.autoToBottom, 300)
-        },
-
-        closeInterval() {
-            clearInterval(this.autoInterval);
-            this.autoInterval = null;
-        },
-
-        scrollTo(top, animate) {
-            if (animate === false) {
-                $A(this.$refs.scrollerView).stop().scrollTop(top);
-            } else {
-                $A(this.$refs.scrollerView).stop().animate({"scrollTop": top});
-            }
-        },
-
-        autoToBottom() {
-            if (this.autoBottom) {
-                $A.scrollToView(this.$refs.bottom, {
-                    behavior: 'instant',
-                    inline: 'end',
-                })
-            }
-        },
-
-        scrollInfo() {
-            let scrollerView = $A(this.$refs.scrollerView);
-            let wInnerH = Math.round(scrollerView.innerHeight());
-            let wScrollY = scrollerView.scrollTop();
-            let bScrollH = this.$refs.scrollerView.scrollHeight;
-            this.scrollY = wScrollY;
-            return {
-                scale: wScrollY / (bScrollH - wInnerH),     //已滚动比例
-                scrollY: wScrollY,                          //滚动的距离
-                scrollE: bScrollH - wInnerH - wScrollY,     //与底部距离
-            }
-        },
-
-        querySelector(el) {
-            return this.$refs.scrollerView && this.$refs.scrollerView.querySelector(el)
-        },
-    }
-}
-</script>

resources/assets/js/pages/manage.vue

@@ -100,7 +100,9 @@
                     </template>
                 </DropdownMenu>
             </Dropdown>
-            <ul :class="listClassName" @scroll="operateVisible = false">
+            <Scrollbar class-name="manage-item" @on-scroll="operateVisible = false">
+                <div class="menu-base">
+                    <ul>
                         <li @click="toggleRoute('dashboard')" :class="classNameRoute('dashboard')">
                             <i class="taskfont">&#xe6fb;</i>
                             <div class="menu-title">{{$L('仪表盘')}}</div>
@@ -121,8 +123,10 @@
                             <i class="taskfont">&#xe6f3;</i>
                             <div class="menu-title">{{$L('文件')}}</div>
                         </li>
-                <li ref="menuProject" class="menu-project">
+                    </ul>
-                    <ul :class="listClassName" @scroll="operateVisible = false">
+                </div>
+                <div ref="menuProject" class="menu-project">
+                    <ul>
                         <li
                             v-for="(item, key) in projectLists"
                             :ref="`project_${item.id}`"
@@ -152,8 +156,8 @@
                         </li>
                         <li v-if="projectKeyLoading > 0" class="loading"><Loading/></li>
                     </ul>
-                </li>
+                </div>
-            </ul>
+            </Scrollbar>
             <div class="operate-position" :style="operateStyles" v-show="operateVisible">
                 <Dropdown
                     trigger="custom"
@@ -610,13 +614,6 @@ export default {
             return data;
         },
 
-        listClassName() {
-            return {
-                'scrollbar-overlay': true,
-                'scrollbar-hidden': this.operateVisible === true,
-            }
-        },
-
         taskBrowseLists() {
             const {cacheTasks, cacheTaskBrowse, userId} = this;
             return cacheTaskBrowse.filter(({userid}) => userid === userId).map(({id}) => {

resources/assets/js/pages/manage/components/ChatInput/emoji.vue

@@ -14,12 +14,14 @@
                     @click="emojiNavActive=item.type"
                     v-html="item.content"></div>
             </div>
-            <ul class="scrollbar-overlay" :class="[type, 'no-dark-content']">
+            <Scrollbar>
+                <ul :class="[type, 'no-dark-content']">
                     <li v-for="item in list" @click="onSelect($event, item)">
                         <img v-if="item.type === 'emoticon'" :src="item.src" :title="item.name" :alt="item.name"/>
                         <span v-else v-html="item.html" :title="item.name"></span>
                     </li>
                 </ul>
+            </Scrollbar>
         </div>
         <ul v-if="!onlyEmoji" class="chat-emoji-menu">
             <li :class="{active: type === 'emosearch'}" @click="type='emosearch'">

resources/assets/js/pages/manage/components/DialogView.vue

@@ -107,18 +107,22 @@
                     popper-class="dialog-wrapper-read-poptip"
                     :placement="isRightMsg ? 'bottom-end' : 'bottom-start'">
                     <div class="read-poptip-content">
-                        <ul class="read scrollbar-overlay">
+                        <Scrollbar class-name="read">
-                            <li class="read-title"><em>{{ todoDoneList.length }}</em>{{ $L('完成') }}</li>
+                            <div class="read-title"><em>{{ todoDoneList.length }}</em>{{ $L('完成') }}</div>
+                            <ul>
                                 <li v-for="item in todoDoneList">
                                     <UserAvatar :userid="item.userid" :size="26" showName tooltipDisabled/>
                                 </li>
                             </ul>
-                        <ul class="unread scrollbar-overlay">
+                        </Scrollbar>
-                            <li class="read-title"><em>{{ todoUndoneList.length }}</em>{{ $L('待办') }}</li>
+                        <Scrollbar class-name="unread">
+                            <div class="read-title"><em>{{ todoUndoneList.length }}</em>{{ $L('待办') }}</div>
+                            <ul>
                                 <li v-for="item in todoUndoneList">
                                     <UserAvatar :userid="item.userid" :size="26" showName tooltipDisabled/>
                                 </li>
                             </ul>
+                        </Scrollbar>
                     </div>
                     <div slot="reference" class="popover-reference"></div>
                 </EPopover>
@@ -147,18 +151,22 @@
                             popper-class="dialog-wrapper-read-poptip"
                             :placement="isRightMsg ? 'bottom-end' : 'bottom-start'">
                             <div class="read-poptip-content">
-                                <ul class="read scrollbar-overlay">
+                                <Scrollbar class-name="read">
-                                    <li class="read-title"><em>{{ readList.length }}</em>{{ $L('已读') }}</li>
+                                    <div class="read-title"><em>{{ readList.length }}</em>{{ $L('已读') }}</div>
+                                    <ul>
                                         <li v-for="item in readList">
                                             <UserAvatar :userid="item.userid" :size="26" showName tooltipDisabled/>
                                         </li>
                                     </ul>
-                                <ul class="unread scrollbar-overlay">
+                                </Scrollbar>
-                                    <li class="read-title"><em>{{ unreadList.length }}</em>{{ $L('未读') }}</li>
+                                <Scrollbar class-name="unread">
+                                    <div class="read-title"><em>{{ unreadList.length }}</em>{{ $L('未读') }}</div>
+                                    <ul>
                                         <li v-for="item in unreadList">
                                             <UserAvatar :userid="item.userid" :size="26" showName tooltipDisabled/>
                                         </li>
                                     </ul>
+                                </Scrollbar>
                             </div>
                             <div slot="reference" class="popover-reference"></div>
                         </EPopover>

resources/assets/js/pages/manage/components/DialogWrapper.vue

@@ -145,7 +145,7 @@
         <!--消息列表-->
         <VirtualList
             ref="scroller"
-            class="dialog-scroller scrollbar-overlay"
+            class="dialog-scroller scrollbar-virtual"
             :class="scrollerClass"
             :data-key="'id'"
             :data-sources="allMsgs"
@@ -481,7 +481,7 @@
                 <div class="dialog-nav">
                     <div class="drawer-title">{{$L('待办消息')}}</div>
                 </div>
-                <div class="dialog-scroller scrollbar-overlay">
+                <Scrollbar class-name="dialog-scroller">
                     <DialogItem
                         v-if="todoViewMsg"
                         :source="todoViewMsg"
@@ -491,7 +491,7 @@
                         @on-emoji="onEmoji"
                         simpleView/>
                     <Button class="original-button" icon="md-exit" type="text" :loading="todoViewPosLoad" @click="onPosTodo">{{ $L("回到原文") }}</Button>
-                </div>
+                </Scrollbar>
                 <div class="todo-button">
                     <Button type="primary" size="large" icon="md-checkbox-outline" @click="onDoneTodo" :loading="todoViewLoad" long>{{ $L("完成") }}</Button>
                 </div>

resources/assets/js/pages/manage/components/ProjectPanel.vue

@@ -137,7 +137,7 @@
                             <Icon class="last" type="md-add" @click="addTopShow(column.id, true)" />
                         </div>
                     </div>
-                    <div :ref="'column_' + column.id" class="column-task scrollbar-overlay">
+                    <Scrollbar class="column-task">
                         <div v-if="!!columnTopShow[column.id]" class="task-item additem">
                             <TaskAddSimple
                                 :column-id="column.id"
@@ -210,7 +210,7 @@
                                     @on-priority="addTaskOpen"/>
                             </div>
                         </Draggable>
-                    </div>
+                    </Scrollbar>
                 </li>
                 <li :class="['add-column', addColumnShow ? 'show-input' : '']">
                     <div class="add-column-text" @click="addColumnOpen">
@@ -229,7 +229,7 @@
                 </li>
             </Draggable>
         </div>
-        <div v-else-if="tabTypeActive === 'table'" class="project-table scrollbar-overlay">
+        <Scrollbar v-else-if="tabTypeActive === 'table'" class="project-table" enable-x>
             <div class="project-table-head">
                 <Row class="task-row">
                     <Col span="12"># {{$L('任务名称')}}</Col>
@@ -315,7 +315,7 @@
                 </Row>
                 <TaskRow v-if="projectData.cacheParameter.showCompleted" :list="completedList" open-key="completed" @on-priority="addTaskOpen" showCompleteAt/>
             </div>
-        </div>
+        </Scrollbar>
         <div v-else-if="tabTypeActive === 'gantt'" class="project-gantt">
             <!--甘特图-->
             <ProjectGantt :projectColumn="columnList" :flowInfo="flowInfo"/>
@@ -981,9 +981,6 @@ export default {
 
         addTopShow(id, show) {
             this.$set(this.columnTopShow, id, show);
-            if (show) {
-                this.$refs['column_' + id][0].scrollTop = 0;
-            }
         },
 
         addTaskOpen(params) {

resources/assets/js/pages/manage/components/ProjectWorkflow.vue

@@ -27,7 +27,7 @@
                         <div class="taskflow-config-table">
                             <div class="taskflow-config-table-left-container">
                                 <div class="taskflow-config-table-column-header left-header">{{$L('配置项')}}</div>
-                                <div :ref="`overlay_${data.id}`" class="taskflow-config-table-column-body scrollbar-overlay">
+                                <div :ref="`overlay_${data.id}`" class="taskflow-config-table-column-body">
                                     <div class="taskflow-config-table-block">
                                         <div class="taskflow-config-table-block-title">{{$L('设置状态为')}}</div>
                                         <div class="taskflow-config-table-block-item">
@@ -113,7 +113,7 @@
                                                 </EDropdown>
                                             </div>
                                         </div>
-                                        <div :ref="`overlay_${data.id}`" class="taskflow-config-table-column-body scrollbar-overlay">
+                                        <div :ref="`overlay_${data.id}`" class="taskflow-config-table-column-body">
                                             <div class="taskflow-config-table-block">
                                                 <div class="taskflow-config-table-block-title"></div>
                                                 <RadioGroup v-model="item.status">

resources/assets/js/pages/manage/components/TaskDetail.vue

@@ -137,7 +137,7 @@
                     </div>
                 </div>
             </div>
-            <div class="scroller scrollbar-overlay">
+            <Scrollbar class-name="scroller">
                 <div class="title">
                     <Input
                         v-model="taskDetail.name"
@@ -387,7 +387,7 @@
                         </EDropdownMenu>
                     </EDropdown>
                 </div>
-            </div>
+            </Scrollbar>
             <TaskUpload ref="upload" class="upload" @on-select-file="onSelectFile"/>
         </div>
         <div v-show="taskDetail.id > 0" class="task-dialog" :style="dialogStyle">

resources/assets/js/pages/manage/components/UpdateLog.vue

@@ -9,7 +9,9 @@
                 <Tag v-if="updateVer" color="volcano">{{updateVer}}</Tag>
             </div>
         </div>
-        <MarkdownPreview class="uplog-body scrollbar-overlay" :initialValue="updateLog"/>
+        <Scrollbar class-name="uplog-body">
+            <MarkdownPreview :initialValue="updateLog"/>
+        </Scrollbar>
         <div slot="footer" class="adaption">
             <Button type="default" @click="uplogFull=!uplogFull">{{$L(uplogFull ? '缩小查看' : '全屏查看')}}</Button>
         </div>

resources/assets/js/pages/manage/dashboard.vue

@@ -35,7 +35,7 @@
                     </div>
                 </li>
             </ul>
-            <div class="dashboard-list scrollbar-overlay">
+            <Scrollbar class="dashboard-list">
                 <template
                     v-for="column in columns"
                     v-if="column.list.length > 0">
@@ -81,7 +81,7 @@
                         </li>
                     </ul>
                 </template>
-            </div>
+            </Scrollbar>
         </div>
     </div>
 </template>

resources/assets/js/pages/manage/messenger.vue

@@ -45,16 +45,13 @@
                 <div v-if="$isEEUiApp && !appNotificationPermission" class="messenger-notify-permission" @click="onOpenAppSetting">
                     {{$L('未开启通知权限')}}<i class="taskfont">&#xe733;</i>
                 </div>
-                <ScrollerY
+                <Scrollbar
                     ref="list"
                     class="messenger-list"
-                    :class="listClassName"
+                    :hide-bar="this.operateVisible"
                     @touchstart.native="listTouch"
-                    @on-scroll="listScroll"
+                    @on-scroll="listScroll">
-                    static>
+                    <ul v-if="tabActive==='dialog'" ref="ul" class="dialog">
-                    <ul
-                        v-if="tabActive==='dialog'"
-                        class="dialog">
                         <li
                             v-if="dialogList.length > 0"
                             v-for="(dialog, key) in dialogList"
@@ -163,7 +160,7 @@
                             </DropdownMenu>
                         </Dropdown>
                     </div>
-                </ScrollerY>
+                </Scrollbar>
                 <div class="messenger-menu">
                     <div class="menu-icon">
                         <Icon @click="onActive(null)" :class="{active:tabActive==='dialog'}" type="ios-chatbubbles" />
@@ -189,14 +186,13 @@
 <script>
 import {mapState} from "vuex";
 import DialogWrapper from "./components/DialogWrapper";
-import ScrollerY from "../../components/ScrollerY";
 import longpress from "../../directives/longpress";
 import {Store} from "le5le-store";
 
 const MessengerObject = {menuHistory: []};
 
 export default {
-    components: {ScrollerY, DialogWrapper},
+    components: {DialogWrapper},
     directives: {longpress},
     data() {
         return {
@@ -431,13 +427,6 @@ export default {
                 });
                 return num;
             }
-        },
-
-        listClassName() {
-            return {
-                'scrollbar-overlay': true,
-                'scrollbar-hidden': this.operateVisible === true,
-            }
         }
     },
 
@@ -531,13 +520,21 @@ export default {
             }
         },
 
-        listScroll(res) {
+        listScroll() {
-            if (res.scrollE < 10) {
+            if (this.scrollE() < 10) {
                 this.getContactsNextPage()
             }
             this.operateVisible = false;
         },
 
+        scrollE() {
+            if (!this.$refs.list) {
+                return 0
+            }
+            const scrollInfo = this.$refs.list.scrollInfo()
+            return scrollInfo.scrollE
+        },
+
         onActive(type) {
             if (type === null) {
                 if (this.tabActive !== 'dialog') {
@@ -767,8 +764,7 @@ export default {
         },
 
         getContactsNextPage() {
-            const {scrollE} = this.$refs.list.scrollInfo();
+            if (this.scrollE() < 10
-            if (scrollE < 10
                 && this.tabActive === 'contacts'
                 && this.contactsLoad === 0
                 && this.contactsHasMorePages) {
@@ -867,7 +863,7 @@ export default {
                 const wrapRect = this.$refs.list.$el.getBoundingClientRect();
                 this.operateStyles = {
                     left: `${event.clientX - wrapRect.left}px`,
-                    top: `${dialogRect.top + this.windowScrollY}px`,
+                    top: `${dialogRect.top - dialogRect.height + this.windowScrollY}px`,
                     height: dialogRect.height + 'px',
                 }
                 this.operateVisible = true;

resources/assets/sass/components/right-bottom.scss

@@ -45,7 +45,6 @@
     }
     .notification-body {
         max-height: 210px;
-        overflow-x: hidden;
         margin-bottom: 16px;
         .markdown-preview {
             margin: -20px -12px;

resources/assets/sass/dark.scss

@@ -370,7 +370,7 @@ body.dark-mode-reverse {
         .messenger-wrapper {
             .messenger-select {
                 .messenger-list {
-                    > ul {
+                    ul {
                         &.dialog {
                             > li {
                                 .icon-avatar {

resources/assets/sass/pages/common.scss

@@ -6,7 +6,6 @@ body {
         .common-gantt .gantt-left .gantt-item,
         .project-panel .project-column,
         .project-panel .project-table,
-        .scrollbar-overlay,
         .ivu-modal-wrap {
             overflow: hidden;
         }

resources/assets/sass/pages/components/chat-input.scss

@@ -305,7 +305,7 @@
 
     .chat-emoji-wrapper {
         .chat-emoji-box {
-            > ul {
+            ul {
                 width: auto;
                 padding: 8px 2px;
                 &::after {
@@ -414,7 +414,7 @@
         display: flex;
         flex-direction: column;
         height: 280px;
-        > ul {
+        ul {
             flex: 1;
             width: 360px;
             height: 0;
@@ -423,7 +423,6 @@
             grid-template-columns: repeat(auto-fill, 40px);
             padding: 8px;
             flex-wrap: wrap;
-            overflow-x: hidden;
             word-break: break-all;
             box-sizing: content-box;
             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
@@ -809,7 +808,7 @@ body.window-portrait {
             background-color: #ffffff;
             .chat-emoji-box {
                 height: 246px;
-                > ul {
+                ul {
                     grid-template-columns: repeat(auto-fill, 50px);
                     > li {
                         width: 50px;

resources/assets/sass/pages/components/dialog-wrapper.scss

@@ -418,6 +418,12 @@
         position: relative;
         padding: 16px 32px 0;
 
+        &.scrollbar-virtual {
+            overflow-x: hidden;
+            overflow-y: auto;
+            -webkit-overflow-scrolling: touch;
+        }
+
         .dialog-item {
             display: flex;
             flex-direction: row;
@@ -1441,10 +1447,27 @@
             flex: 1;
             max-height: 300px;
 
-            > li {
+            .read-title,
+            ul > li {
+                padding-bottom: 12px;
+            }
+
+            .read-title {
+                position: sticky;
+                top: 0;
+                z-index: 10;
+                background: #ffffff;
+                > em {
+                    font-size: 18px;
+                    font-weight: 600;
+                    font-style: normal;
+                    padding-right: 6px;
+                }
+            }
+
+            ul > li {
                 min-height: 26px;
                 list-style: none;
-                margin-bottom: 12px;
 
                 .common-avatar {
                     width: 100%;
@@ -1454,7 +1477,7 @@
                 }
 
                 &:last-child {
-                    margin-bottom: 6px;
+                    padding-bottom: 6px;
                 }
 
                 &.read-title {
@@ -1470,7 +1493,8 @@
         }
 
         .unread {
-            > li {
+            .read-title,
+            ul > li {
                 padding-left: 16px;
             }
         }

resources/assets/sass/pages/components/project-panel.scss

@@ -368,7 +368,6 @@
                     flex: 1;
                     display: flex;
                     flex-direction: column;
-                    overflow-x: hidden;
                     .task-list {
                         > div:last-child {
                             margin-bottom: 16px;
@@ -602,7 +601,6 @@
     .project-table {
         height: 100%;
         margin-top: 18px;
-        overflow-x: auto;
         .task-row {
             background-color: #ffffff;
             border-bottom: 1px solid #F4F4F5;

resources/assets/sass/pages/components/task-detail.scss

@@ -152,7 +152,6 @@
             margin-left: 28px;
             padding-left: 8px;
             padding-right: 36px;
-            overflow-x: hidden;
             .title {
                 margin-top: 18px;
                 .ivu-input {

resources/assets/sass/pages/components/update-log.scss

@@ -15,7 +15,6 @@
         padding: 0 32px !important;
         .uplog-body {
             max-height: 240px;
-            overflow-x: hidden;
             .markdown-preview {
                 margin: -20px -12px;
                 h1 {

resources/assets/sass/pages/page-dashboard.scss

@@ -308,7 +308,9 @@ body.window-portrait {
             }
             .dashboard-list {
                 padding-bottom: 2px;
+                .scrollbar-content {
                     overflow: visible;
+                }
                 .dashboard-ul {
                     margin-bottom: 36px;
                     user-select: none;

resources/assets/sass/pages/page-manage.scss

@@ -16,13 +16,23 @@
         flex-direction: column;
         align-items: center;
         transition: all 0.2s;
-        > ul {
+        .scrollbar-container {
             flex: 1;
             width: 100%;
             margin-top: 16px;
             display: flex;
             flex-direction: column;
-            overflow: hidden;
+        }
+        .menu-base {
+            position: sticky;
+            top: 0;
+            z-index: 1;
+            background: #F4F5F7;
+            ul {
+                flex: 1;
+                width: 100%;
+                display: flex;
+                flex-direction: column;
                 > li {
                     flex-shrink: 0;
                     display: flex;
@@ -57,7 +67,10 @@
                     &.active {
                         background-color: #ffffff;
                     }
-                &.menu-project {
+                }
+            }
+        }
+        .menu-project {
             flex: 1;
             display: flex;
             flex-direction: column;
@@ -182,8 +195,6 @@
                 }
             }
         }
-            }
-        }
         .operate-position {
             position: absolute;
             top: 0;
@@ -401,21 +412,8 @@
 @media (max-height: 640px) {
     .page-manage {
         .manage-box-menu {
-            > ul {
+            .menu-base {
-                overflow: auto;
+                position: relative;
-                &.scrollbar-overlay {
-                    overflow-y: overlay;
-                }
-                > li {
-                    &.menu-project {
-                        > ul {
-                            overflow: visible;
-                        }
-                    }
-                }
-            }
-            .manage-project-search {
-                margin-top: 12px;
             }
         }
     }

resources/assets/sass/pages/page-messenger.scss

@@ -126,7 +126,7 @@
                 height: 0;
                 width: 100%;
                 overflow-x: hidden;
-                > ul {
+                ul {
                     &.dialog {
                         > li {
                             display: flex;
@@ -486,6 +486,7 @@
                     left: 0;
                     width: 1px;
                     opacity: 0;
+                    margin-top: -4px;
                     visibility: hidden;
                     pointer-events: none;
                 }
@@ -620,9 +621,9 @@ body.window-portrait {
                     opacity: 0;
                 }
                 .messenger-list {
-                    > ul {
+                    ul {
-                        user-select: none;
                         &.dialog {
+                            user-select: none;
                             > li {
                                 .user-avatar {
                                     .common-avatar {
@@ -647,6 +648,9 @@ body.window-portrait {
                                 }
                             }
                         }
+                        &.contacts {
+                            user-select: none;
+                        }
                     }
                 }
             }

resources/assets/sass/scrollbar.scss

@@ -1,52 +1 @@
-/* 滚动条美化 */
+@import "../js/components/Scrollbar/style.scss";
-.scrollbar-overlay {
-    overflow-y: auto;
-    overflow-y: overlay;
-    -webkit-overflow-scrolling: touch;
-
-    /* 滚动条尺寸 */
-    &::-webkit-scrollbar {
-        width: 0;
-        height: 0;
-    }
-
-    /*滚动条滑块隐藏*/
-    &::-webkit-scrollbar-thumb {
-        border: 3px solid transparent;
-        background-color: rgba(0, 0, 0, .2);
-        background-clip: content-box;
-        border-radius: 12px;
-        /*让该容器的滚动条滑块显示*/
-        &:hover {
-            border: 2px solid transparent;
-            background-color: rgba(0, 0, 0, .2);
-        }
-
-        /*按下滚动条，颜色加深*/
-        &:active {
-            border: 2px solid transparent;
-            background-color: rgba(0, 0, 0, .4);
-        }
-    }
-
-    /*滚动条轨道*/
-    &::-webkit-scrollbar-track {
-        border-radius: 12px;
-        background: rgba(0, 0, 0, 0);
-    }
-
-    /*鼠标浮到容器上*/
-    &:hover {
-        &::-webkit-scrollbar {
-            width: 12px;
-            height: 12px;
-        }
-    }
-}
-
-/* 滚动条隐藏 */
-.scrollbar-hidden {
-    &::-webkit-scrollbar {
-        display: none;
-    }
-}

resources/mobile

@@ -1 +1 @@
-Subproject commit 650cba17f8837c87d7d9fe308a85665f3cf17c80
+Subproject commit c74b2a91db411bbffe6b406d9e21677821bf39d4