feat: n-scrollbar adds y-bar-min-size prop

CHANGELOG.en-US.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## 2.41.1
+
+### Features
+
+- `n-scrollbar` adds `y-bar-min-size` to set the minimum height of the vertical scrollbar thumb.
+
 ## 2.41.0
 
 `2025-01-05`

CHANGELOG.zh-CN.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## 2.41.1
+
+### Features
+
+- `n-scrollbar` 新增 `y-bar-min-size` 来设置滚动条的最小高度
+
 ## 2.41.0
 
 `2025-01-05`

src/_internal/scrollbar/src/Scrollbar.tsx

@@ -113,6 +113,10 @@ const scrollbarProps = {
   xPlacement: {
     type: String as PropType<'top' | 'bottom'>,
     default: 'bottom'
+  },
+  yBarMinSize: {
+    type: Number,
+    default: 0
   }
 } as const
 
@@ -180,11 +184,15 @@ const Scrollbar = defineComponent({
         return 0
       }
       else {
-        return Math.min(
+        const calculatedSize = Math.min(
           containerHeight,
           (yRailSize * containerHeight) / contentHeight
           + depx(themeRef.value.self.width) * 1.5
         )
+
+        return props.yBarMinSize > 0
+          ? Math.max(calculatedSize, props.yBarMinSize)
+          : calculatedSize
       }
     })
     const yBarSizePxRef = computed(() => {

src/scrollbar/demos/enUS/index.demo-entry.md

@@ -26,6 +26,7 @@ placement.vue
 | x-scrollable | `boolean` | `false` | Whether it can scroll horizontally. |  |
 | x-placement | `'top' \| 'bottom'` | `bottom` | Scrollbar placement when scrolling horizontally. | 2.40.0 |
 | y-placement | `'left' \| 'right'` | `right` | Scrollbar placement when scrolling vertically. | 2.40.0 |
+| y-bar-min-size | `number` | `0` | Takes effect when greater than `0`, ensuring the vertical scrollbar thumb's height is at least `x`px | 2.41.1 |
 | on-scroll | `(e: Event) => void` | `undefined` | Callback on scroll. |  |
 
 ### Scrollbar Slots

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

@@ -27,6 +27,7 @@ placement.vue
 | x-scrollable | `boolean` | `false` | 是否可以横向滚动 |  |
 | x-placement | `'top' \| 'bottom'` | `bottom` | 横向滚动时滚动条的位置 | 2.40.0 |
 | y-placement | `'left' \| 'right'` | `right` | 纵向滚动时滚动条的位置 | 2.40.0 |
+| y-bar-min-size | `number` | `0` | 当大于`0`时生效，保证垂直滚动条的高度至少为`x`px | 2.41.1 |
 | on-scroll | `(e: Event) => void` | `undefined` | 滚动的回调 |  |
 
 ### Scrollbar Slots

src/scrollbar/src/Scrollbar.tsx

@@ -34,6 +34,10 @@ export const scrollbarProps = {
   xPlacement: {
     type: String as PropType<'top' | 'bottom'>,
     default: 'bottom'
+  },
+  yBarMinSize: {
+    type: Number,
+    default: 0
   }
 } as const
 

src/virtual-list/demos/enUS/custom-scroll.demo.vue

@@ -0,0 +1,58 @@
+<markdown>
+# Set Scrollbar's Minimum Height
+Unless your users are all CS:GO pro players, you'd better make that scrollbar bigger
+</markdown>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const avatars = [
+      'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg',
+      'https://avatars.githubusercontent.com/u/20943608?s=60&v=4',
+      'https://avatars.githubusercontent.com/u/46394163?s=60&v=4',
+      'https://avatars.githubusercontent.com/u/39197136?s=60&v=4',
+      'https://avatars.githubusercontent.com/u/19239641?s=60&v=4'
+    ]
+
+    const items = Array.from({ length: 10000 }, (_, i) => ({
+      key: `${i}`,
+      value: i,
+      avatar: avatars[i % avatars.length]
+    }))
+
+    return {
+      items
+    }
+  }
+})
+</script>
+
+<template>
+  <n-virtual-list
+    style="max-height: 240px"
+    :item-size="42"
+    :items="items"
+    :scrollbar-props="{ yBarMinSize: 20 }"
+  >
+    <template #default="{ item }">
+      <div :key="item.key" class="item" style="height: 42px">
+        <img class="avatar" :src="item.avatar" alt="">
+        <span> {{ item.value }}</span>
+      </div>
+    </template>
+  </n-virtual-list>
+</template>
+
+<style>
+.item {
+  display: flex;
+  align-items: center;
+}
+.avatar {
+  width: 28px;
+  border-radius: 50%;
+  margin-right: 10px;
+}
+</style>

src/virtual-list/demos/enUS/index.demo-entry.md

@@ -13,6 +13,7 @@ basic.vue
 dynamic-size.vue
 scroll.vue
 keep-alive.vue
+custom-scroll.vue
 ```
 
 ## API

src/virtual-list/demos/zhCN/custom-scroll.demo.vue

@@ -0,0 +1,58 @@
+<markdown>
+# 设置滚动条最小值高度
+除非你的用户都是CS:GO的职业选手，不然还是把滚动条弄大点吧
+</markdown>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const avatars = [
+      'https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg',
+      'https://avatars.githubusercontent.com/u/20943608?s=60&v=4',
+      'https://avatars.githubusercontent.com/u/46394163?s=60&v=4',
+      'https://avatars.githubusercontent.com/u/39197136?s=60&v=4',
+      'https://avatars.githubusercontent.com/u/19239641?s=60&v=4'
+    ]
+
+    const items = Array.from({ length: 10000 }, (_, i) => ({
+      key: `${i}`,
+      value: i,
+      avatar: avatars[i % avatars.length]
+    }))
+
+    return {
+      items
+    }
+  }
+})
+</script>
+
+<template>
+  <n-virtual-list
+    style="max-height: 240px"
+    :item-size="42"
+    :items="items"
+    :scrollbar-props="{ yBarMinSize: 20 }"
+  >
+    <template #default="{ item }">
+      <div :key="item.key" class="item" style="height: 42px">
+        <img class="avatar" :src="item.avatar" alt="">
+        <span> {{ item.value }}</span>
+      </div>
+    </template>
+  </n-virtual-list>
+</template>
+
+<style>
+.item {
+  display: flex;
+  align-items: center;
+}
+.avatar {
+  width: 28px;
+  border-radius: 50%;
+  margin-right: 10px;
+}
+</style>

src/virtual-list/demos/zhCN/index.demo-entry.md

@@ -13,6 +13,7 @@ basic.vue
 dynamic-size.vue
 scroll.vue
 keep-alive.vue
+custom-scroll.vue
 ```
 
 ## API