feat: share wrappers scrolling states using useScrollbar().isScrollin…

…g.xy state

README.md

@@ -142,6 +142,14 @@ barStates.offset.x.bottom = 5 // px
 console.log(barStates.isDragging.y)
 ```
 
+#### 1.6. barStates.isScrolling
+
+获取当前滚动区域的滚动状态。
+
+```typescript
+console.log(barStates.isScrolling.x)
+```
+
 ### 2. Actions
 
 #### 2.1. barStates.init
@@ -209,6 +217,8 @@ pnpm install
 pnpm serve
 ```
 
+近期开发路线：接下来会看一下性能方面的优化，以及如何在 Vue2/Vue3 中通用。
+
 ## 📄 License
 
 MIT License

play/src/vxe-table.vue

@@ -44,7 +44,7 @@ const isHover = useElementHover(playRef);
 
  const states = reactive({
   isVirtualScroll: false,
-  isVirtualScrollbar: false,
+  isVirtualScrollbar: true,
   isLoading: false,
   tableData: [] as any[],
   sexList: [

play/src/vxe-table/index.vue

@@ -1,6 +1,11 @@
 <template>
   <vxe-table
-    :class="props.enable ? 'is-virtual-scrollbar' : ''"
+    :class="[
+      props.enable ? 'is-virtual-scrollbar' : '',
+      barStates.isScrolling.x ? 'is-scrolling-x' : '',
+      barStates.isScrolling.y ? 'is-scrolling-y' : '',
+      (!barStates.isScrolling.x && !barStates.isScrolling.y) ? 'is-no-scrolling' : '',
+    ]"
     ref="tableRef"
     height="100%"
     v-bind="$attrs"
@@ -25,6 +30,7 @@ if (!slots.default) {
 
 const tableRef = ref<any | null>(null);
 const barStates = useScrollbar();
+console.log('[info] barStates', barStates)
 
 watch(() => props.enable, async (enable) => {
   console.log('[info] 开启虚拟滚动条', enable)
@@ -58,7 +64,7 @@ watch(() => props.enable, async (enable) => {
 })
 </script>
 
-<style>
+<style lang="less">
 .vxe-table {
   box-sizing: border-box;
   border: solid 1px #333;
@@ -82,4 +88,42 @@ watch(() => props.enable, async (enable) => {
   width: 0;
   height: 0;
 }
+
+/** test box-shadow on scroll */
+.vxe-table.vxe-table.vxe-table {
+  --color-1: rgb(0 0 0 / 5%);
+  --color-2: rgb(0 0 0 / 3%);
+  --color-3: rgb(0 0 0 / 8%);
+
+  .vxe-table--header-wrapper {
+    z-index: 9;
+  }
+
+  .vxe-table--header-wrapper,
+  .vxe-table--fixed-left-wrapper,
+  .vxe-table--fixed-right-wrapper {
+    box-shadow: 0 0 0 0 var(--color-1), 0 0 0 0 var(--color-2), 0 0 0 -8px var(--color-3);
+    transition: box-shadow 0.35s ease-out;
+    transition-delay: 0.5s;
+    will-change: box-shadow;
+  }
+  &.is-scrolling-x {
+    .vxe-table--header-wrapper {
+      z-index: unset;
+    }
+    .vxe-table--fixed-left-wrapper,
+    .vxe-table--fixed-right-wrapper {
+      box-shadow: 0 9px 28px 0 var(--color-1), 0 12px 48px 16px var(--color-2), 0 6px 16px -8px var(--color-3);
+      transition: box-shadow 0.25s ease-in;
+      transition-delay: 0.01s;
+    }
+  }
+  &.is-scrolling-y {
+    .vxe-table--header-wrapper {
+      box-shadow: 0 0 8px 0 var(--color-1), 0 0 12px 18px var(--color-2), 0 0 16px -8px var(--color-3);
+      transition: box-shadow 0.25s ease-in;
+      transition-delay: 0.01s;
+    }
+  }
+}
 </style>

src/hooks/useScrollbar/index.ts

@@ -167,6 +167,15 @@ export default function useScrollbar(
     const contentH = ref(0)
     const scrollTop = ref(0)
     const scrollLeft = ref(0)
+    const directions = ref({
+      top: false,
+      bottom: false,
+      left: false,
+      right: false,
+    })
+    watchEffect(() => {
+      console.log(directions.value)
+    })
 
     /* 初始化数据 */
 
@@ -204,10 +213,28 @@ export default function useScrollbar(
     if (opts.wrapper.length) {
       const tops = [] as Ref<number>[]
       const lefts = [] as Ref<number>[]
-      opts.wrapper.map(($elm) => {
-        const { x: left, y: top } = useScroll($elm as HTMLElement)
+      const dss = Array.from({ length: opts.wrapper.length }).map(() => ref({
+        top: false,
+        bottom: false,
+        left: false,
+        right: false,
+      }))
+      opts.wrapper.map(($elm, idx) => {
+        const { x: left, y: top, directions: ds } = useScroll($elm as HTMLElement)
         tops.push(top)
         lefts.push(left)
+        watchEffect(() => {
+          dss[idx].value.bottom = unref(ds).bottom
+          dss[idx].value.top = unref(ds).top
+          dss[idx].value.left = unref(ds).left
+          dss[idx].value.right = unref(ds).right
+        })
+      })
+      watchEffect(() => {
+        directions.value.top = dss.map(unref).some(x => x.top)
+        directions.value.bottom = dss.map(unref).some(x => x.bottom)
+        directions.value.left = dss.map(unref).some(x => x.left)
+        directions.value.right = dss.map(unref).some(x => x.right)
       })
       watchEffectGathered(() => {
         scrollTop.value = Math.max(...tops.map(unref))
@@ -349,6 +376,8 @@ export default function useScrollbar(
     watchEffectGathered(() => (states.contentW = contentW.value))
     watchEffectGathered(() => (states.scrollTop = scrollTop.value))
     watchEffectGathered(() => (states.scrollLeft = scrollLeft.value))
+    watchEffectGathered(() => (states.isScrolling.x = directions.value.left || directions.value.right))
+    watchEffectGathered(() => (states.isScrolling.y = directions.value.top || directions.value.bottom))
   }
 
   /* 计算滚动条样式 */

src/hooks/useScrollbar/states.ts

@@ -53,6 +53,11 @@ const getOpts = () => ({
     x: false,
     y: false,
   },
+  // 滚动条的滚动状态
+  isScrolling: {
+    x: false,
+    y: false,
+  },
   // 滚动条样式
   styles: {
     y: {},