fix(tree): scrollbar overflows in virtual scroll mode, closes #2673

CHANGELOG.en-US.md

@@ -11,6 +11,7 @@
 - Fix `n-popselect` doesn't has `setShow` & `syncPosition` methods.
 - Fix `n-menu` theme's peers missing `Dropdown`.
 - Fix `n-color-picker` can't input 0 as unit's value, closes [#2680](https://github.com/TuSimple/naive-ui/issues/2680)
+- Fix `n-tree`'s scrollbar overflows in virtual scroll mode, closes [#2673](https://github.com/TuSimple/naive-ui/issues/2673)
 
 ### Feats
 

CHANGELOG.zh-CN.md

@@ -11,6 +11,7 @@
 - 修复 `n-popselect` 缺少 `setShow` 和 `syncPosition` 方法
 - 修复 `n-menu` 主题 peers 缺少 `Dropdown`
 - 修复 `n-color-picker` 不能输入 0 作为单位的值，关闭 [#2680](https://github.com/TuSimple/naive-ui/issues/2680)
+- 修复 `n-tree` 再使用虚拟滚动时滚动条长度存在问题，关闭 [#2673](https://github.com/TuSimple/naive-ui/issues/2673)
 
 ### Feats
 

package.json

@@ -143,7 +143,7 @@
     "vdirs": "^0.1.7",
     "vfonts": "^0.0.3",
     "vooks": "^0.2.12",
-    "vueuc": "^0.4.27"
+    "vueuc": "^0.4.28"
   },
   "sideEffects": false,
   "homepage": "https://www.naiveui.com",

src/_internal/scrollbar/src/ScrollBar.tsx

@@ -195,9 +195,10 @@ const Scrollbar = defineComponent({
       ) {
         return 0
       } else {
+        const heightDiff = contentHeight - containerHeight
+        if (!heightDiff) return 0
         return (
-          (containerScrollTop / (contentHeight - containerHeight)) *
-          (yRailSize - yBarSizeRef.value)
+          (containerScrollTop / heightDiff) * (yRailSize - yBarSizeRef.value)
         )
       }
     })
@@ -216,9 +217,10 @@ const Scrollbar = defineComponent({
       ) {
         return 0
       } else {
+        const widthDiff = contentWidth - containerWidth
+        if (!widthDiff) return 0
         return (
-          (containerScrollLeft / (contentWidth - containerWidth)) *
-          (xRailSize - xBarSizeRef.value)
+          (containerScrollLeft / widthDiff) * (xRailSize - xBarSizeRef.value)
         )
       }
     })

src/tree/demos/zhCN/index.demo-entry.md

@@ -22,6 +22,7 @@ switcher-icon.vue
 node-props.vue
 check-strategy-debug.vue
 change-debug.vue
+scrollbar-debug.vue
 ```
 
 ## API

src/tree/demos/zhCN/scrollbar-debug.demo.vue

@@ -0,0 +1,46 @@
+<markdown>
+# Scrollbar debug
+</markdown>
+
+<template>
+  <n-tree
+    block-line
+    :data="data"
+    default-expand-all
+    virtual-scroll
+    style="height: 320px; background-color: #cce3db"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { repeat } from 'seemly'
+import { TreeOption } from 'naive-ui'
+
+function createData (level = 4, baseKey = ''): TreeOption[] | undefined {
+  if (!level) return undefined
+  return repeat(5 - level, undefined).map((_, index) => {
+    const key = '' + baseKey + level + index
+    return {
+      label: createLabel(level),
+      key,
+      children: createData(level - 1, key)
+    }
+  })
+}
+
+function createLabel (level: number): string {
+  if (level === 4) return '道生一'
+  if (level === 3) return '一生二'
+  if (level === 2) return '二生三'
+  if (level === 1) return '三生万物'
+  return ''
+}
+export default defineComponent({
+  setup () {
+    return {
+      data: createData()
+    }
+  }
+})
+</script>

src/tree/src/styles/index.cssr.ts

@@ -45,6 +45,7 @@ export default cB('tree', `
     ])
   ]),
   cB('tree-node-wrapper', `
+    box-sizing: border-box;
     padding: 3px 0;
   `),
   cB('tree-node', `