fix: 计算滚动条尺寸时若最大高度约等于基础高度，那么计算用的基础高度以原先基础高度的 0.8 计

Lionad-Morotar · Mar 13, 2023 · 2007340 · 2007340
1 parent c8f8589
commit 2007340
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 31 deletions.
diff --git a/play/src/vxe-table-multy.vue b/play/src/vxe-table-multy.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="play-container" ref="playRef">
     <div class="header">
-      <h4>## VXETable with Virtual Scrollbars {{ isHover ? ' - Hovered' : '' }}</h4>
+      <h4>## Multy VXETable with Virtual Scrollbars {{ isHover ? ' - Hovered' : '' }}</h4>
       <el-checkbox v-model="states.isVirtualScroll">表格虚拟滚动</el-checkbox>
       <el-checkbox v-model="states.isVirtualScrollbar">表格虚拟滚动条</el-checkbox>
     </div>
     <div class="table-cons">
-      <!-- <div class="padding" /> -->
+      <!-- first -->
       <vxe-table-virtual-scrollbar
         border
         stripe
@@ -31,6 +31,7 @@
         <vxe-column field="address" title="Address Another" :width="1000"></vxe-column>
         <vxe-column type="seq" :width="60" fixed="right"></vxe-column>
       </vxe-table-virtual-scrollbar>
+      <!-- first -->
       <vxe-table-virtual-scrollbar
         border
         stripe
@@ -55,30 +56,6 @@
         <vxe-column field="address" title="Address Another" :width="1000"></vxe-column>
         <vxe-column type="seq" :width="60" fixed="right"></vxe-column>
       </vxe-table-virtual-scrollbar>
-      <!-- <vxe-table-virtual-scrollbar
-        border
-        stripe
-        :enable="states.isVirtualScrollbar"
-        :loading="states.isLoading"
-        :tree-config="{transform: true}"
-        :column-config="{resizable: true}"
-        :row-config="{isHover: true}"
-        :checkbox-config="{labelField: 'id', highlight: true}"
-        :data="states.tableData"
-        :scroll-x="{ enabled: states.isVirtualScroll }"
-        :scroll-y="{ enabled: states.isVirtualScroll }"
-        >
-        <vxe-column type="seq" :width="180" fixed="left" tree-node></vxe-column>
-        <vxe-column type="checkbox" title="ID" :width="140"></vxe-column>
-        <vxe-column field="name" title="Name" :width="140"></vxe-column>
-        <vxe-column field="sex" title="Sex" :formatter="formatterSex" :width="140"></vxe-column>
-        <vxe-column field="age" title="Age" :width="120"></vxe-column>
-        <vxe-column field="address" title="Address" show-overflow :min-width="300"></vxe-column>
-        <vxe-column field="address" title="Address Another" :width="1000"></vxe-column>
-        <vxe-column field="address" title="Address Another" :width="1000"></vxe-column>
-        <vxe-column field="address" title="Address Another" :width="1000"></vxe-column>
-        <vxe-column type="seq" :width="60" fixed="right"></vxe-column>
-      </vxe-table-virtual-scrollbar> -->
     </div>
   </div>
 </template>
@@ -116,7 +93,7 @@ const formatterSex = ({ cellValue }: any) => {
 const refresh = async () => {
   states.isLoading = true
   setTimeout(() => {
-    const itemCount = 500
+    const itemCount = 15
     let parentId = 0
     states.tableData = Array(itemCount).fill(0).map((x, idx) => {
       const res = {

diff --git a/src/hooks/useScrollbar/index.ts b/src/hooks/useScrollbar/index.ts
@@ -242,18 +242,25 @@ export default function useScrollbar(
      * @FIXME 当容器尺寸大于滚动条尺寸时
      */
     watchEffectGathered(() => {
-      const base = Math.min(config.size.base, states.mountOnH)
-      const max = Math.min(config.size.max, states.mountOnH)
+      const top = states.offset.y.top || 0
+      const base = Math.min(config.size.base, states.mountOnH - top)
+      const max = Math.min(config.size.max, states.mountOnH - top)
       let height = config.size.base
       const hiddenY = contentH.value <= viewportH.value
       states.isHidden.y = hiddenY
 
+      const isBaseNearMax = Math.abs(base - max) / max < 0.1
+      if (isBaseNearMax) {
+        height *= 0.7
+      }
+
       const overflow = Math.abs(contentH.value - viewportH.value)
       const isOnePageY = overflow < viewportH.value
       if (isOnePageY) {
         const unset = max - base
         const offset = (1 - overflow / viewportH.value) * unset
         height += offset
+        // console.log('[debug]', states.mountOnH, top, base, max, unset, height, overflow, offset)
       } else {
         const overflowSQRT = Math.min(Math.sqrt(overflow), viewportH.value) * 10
         const ratio = 1 - overflowSQRT / viewportH.value
@@ -263,12 +270,18 @@ export default function useScrollbar(
       states.size.y.height = safeHeight
     })
     watchEffectGathered(() => {
-      const base = Math.min(config.size.base, states.mountOnW)
-      const max = Math.min(config.size.max, states.mountOnW)
+      const left = states.offset.x.left || 0
+      const base = Math.min(config.size.base, states.mountOnW - left)
+      const max = Math.min(config.size.max, states.mountOnW - left)
       let width = config.size.base
       const hiddenX = contentW.value <= viewportW.value
       states.isHidden.x = hiddenX
 
+      const isBaseNearMax = Math.abs(base - max) / max < 0.1
+      if (isBaseNearMax) {
+        width *= 0.7
+      }
+
       const overflow = Math.abs(contentW.value - viewportW.value)
       const isOnePageX = overflow < viewportW.value
       if (isOnePageX) {