feat(scrollbar): add scrollBy method, closes #2435

tusen-ai · Feb 19, 2022 · a999358 · a999358
1 parent c31c994
commit a999358
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 9 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -12,13 +12,14 @@
 
 ### Feats
 
-- `n-tree-select` add `clear-filter-after-select` prop.
-- `n-cascader` add `clear-filter-after-select` prop.
-- `n-switch` add `icon` slot.
-- `n-switch` add `checked-icon` slot.
-- `n-switch` add `unchecked-icon` slot.
+- `n-tree-select` adds `clear-filter-after-select` prop.
+- `n-cascader` adds `clear-filter-after-select` prop.
+- `n-switch` adds `icon` slot.
+- `n-switch` adds `checked-icon` slot.
+- `n-switch` adds `unchecked-icon` slot.
 - `n-tabs` uses `n` as CSS vars prefix.
-- `n-watermark` add new component, closes [#1745](https://github.com/TuSimple/naive-ui/issues/1745).
+- Add `n-watermark` component, closes [#1745](https://github.com/TuSimple/naive-ui/issues/1745).
+- `n-scrollbar` adds `scrollBy` method, closes [#2435](https://github.com/TuSimple/naive-ui/issues/2435).
 
 ### i18n
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -19,6 +19,7 @@
 - `n-switch` 新增 `unchecked-icon` 插槽
 - `n-tabs` 的 CSS 变量使用 `n` 作为前缀
 - `n-watermark` 新增组件，关闭 [#1745](https://github.com/TuSimple/naive-ui/issues/1745)
+- `n-scrollbar` 新增 `scrollBy` 方法，关闭 [#2435](https://github.com/TuSimple/naive-ui/issues/2435)
 
 ### i18n
 

diff --git a/src/_internal/scrollbar/src/ScrollBar.tsx b/src/_internal/scrollbar/src/ScrollBar.tsx
@@ -52,9 +52,15 @@ export interface ScrollTo {
   }): void
 }
 
+export interface ScrollBy {
+  (x: number, y: number): void
+  (options: { left?: number, top?: number, behavior?: ScrollBehavior }): void
+}
+
 export interface ScrollbarInstMethods {
   syncUnifiedContainer: () => void
   scrollTo: ScrollTo
+  scrollBy: ScrollBy
   sync: () => void
   handleMouseEnterWrapper: () => void
   handleMouseLeaveWrapper: () => void
@@ -296,6 +302,19 @@ const Scrollbar = defineComponent({
         scrollToPosition(0, 0, 0, false, behavior)
       }
     }
+    const scrollBy: ScrollBy = (
+      options: ScrollOptions | number,
+      y?: number
+    ): void => {
+      if (!props.scrollable) return
+      const { value: container } = mergedContainerRef
+      if (!container) return
+      if (typeof options === 'object') {
+        container.scrollBy(options)
+      } else {
+        container.scrollBy(options, y || 0)
+      }
+    }
     function scrollToPosition (
       left: number,
       top: number,
@@ -605,6 +624,7 @@ const Scrollbar = defineComponent({
       : undefined
     const exposedMethods: ScrollbarInstMethods = {
       scrollTo,
+      scrollBy,
       sync,
       syncUnifiedContainer,
       handleMouseEnterWrapper,

diff --git a/src/scrollbar/demos/enUS/index.demo-entry.md b/src/scrollbar/demos/enUS/index.demo-entry.md
@@ -27,4 +27,5 @@ x.vue
 
 | Name | Type | Description |
 | --- | --- | --- |
-| scrollTo | `(options: { left?: number, top?: number, behavior?: ScrollBehavior }): void & (x: number, y: number) => void` | Scrolling content. |
+| scrollBy | `(options: { left?: number, top?: number, behavior?: ScrollBehavior }): void & (x: number, y: number) => void` | Scroll content by specific distance. |
+| scrollTo | `(options: { left?: number, top?: number, behavior?: ScrollBehavior }): void & (x: number, y: number) => void` | Scroll content. |
diff --git a/src/scrollbar/demos/zhCN/index.demo-entry.md b/src/scrollbar/demos/zhCN/index.demo-entry.md
@@ -27,4 +27,5 @@ x.vue
 
 | 名称 | 类型 | 说明 |
 | --- | --- | --- |
+| scrollBy | `(options: { left?: number, top?: number, behavior?: ScrollBehavior }): void & (x: number, y: number) => void` | 滚动特定距离 |
 | scrollTo | `(options: { left?: number, top?: number, behavior?: ScrollBehavior }): void & (x: number, y: number) => void` | 滚动内容 |
diff --git a/src/scrollbar/src/ScrollBar.tsx b/src/scrollbar/src/ScrollBar.tsx
@@ -1,5 +1,8 @@
 import { h, defineComponent, PropType, ref } from 'vue'
-import { NScrollbar } from '../../_internal'
+import {
+  NScrollbar,
+  ScrollbarInst as InternalScrollbarInst
+} from '../../_internal'
 import { ScrollbarTheme } from '../../_internal/scrollbar/styles'
 import { useTheme, ThemeProps } from '../../_mixins'
 import type { ExtractPublicPropTypes } from '../../_utils'
@@ -9,8 +12,11 @@ export interface ScrollTo {
   (options: { left?: number, top?: number, behavior?: ScrollBehavior }): void
 }
 
+export type ScrollBy = ScrollTo
+
 export interface ScrollbarInst {
   scrollTo: ScrollTo
+  scrollBy: ScrollBy
 }
 
 const scrollbarProps = {
@@ -25,10 +31,13 @@ const Scrollbar = defineComponent({
   name: 'Scrollbar',
   props: scrollbarProps,
   setup () {
-    const scrollbarInstRef = ref<ScrollbarInst | null>(null)
+    const scrollbarInstRef = ref<InternalScrollbarInst | null>(null)
     const exposedMethods: ScrollbarInst = {
       scrollTo: (...args: any[]) => {
         scrollbarInstRef.value?.scrollTo(args[0], args[1])
+      },
+      scrollBy: (...args: any[]) => {
+        scrollbarInstRef.value?.scrollBy(args[0], args[1])
       }
     }
     return {