fix(scrollbar): doesn't support scrollTo, closes #1346

CHANGELOG.en-US.md

@@ -6,6 +6,7 @@
 
 - Fix `n-data-table` fixed style does not work in group header table，closes [#1341](https://github.com/TuSimple/naive-ui/issues/1341).
 - Fix `n-data-table` has duplicate right border when it has multiple level headers.
+- Fix `n-scrollbar` doesn't support `scrollTo`, closes [#1346](https://github.com/TuSimple/naive-ui/issues/1346).
 
 ### Feats
 

CHANGELOG.zh-CN.md

@@ -6,6 +6,7 @@
 
 - 修复 `n-data-table` `fixed` 样式在表头分组不生效的问题，关闭 [#1341](https://github.com/TuSimple/naive-ui/issues/1341)
 - 修复 `n-data-table` 多级表头右侧边框重复
+- 修复 `n-scrollbar` 不支持 `scrollTo`，关闭 [#1346](https://github.com/TuSimple/naive-ui/issues/1346)
 
 ### Feats
 

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

@@ -22,3 +22,9 @@ x
 | Name    | Parameters | Description     |
 | ------- | ---------- | --------------- |
 | default | `()`       | Scroll content. |
+
+### Scrollbar Methods
+
+| Name | Type | Description |
+| --- | --- | --- |
+| scrollTo | `(options: { left?: number, top?: number, behavior?: ScrollBehavior }): void & (x: number, y: number) => void` | Scrolling content. |

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

@@ -22,3 +22,9 @@ x
 | 名称    | 参数 | 说明     |
 | ------- | ---- | -------- |
 | default | `()` | 滚动内容 |
+
+### Scrollbar Methods
+
+| 名称 | 类型 | 说明 |
+| --- | --- | --- |
+| scrollTo | `(options: { left?: number, top?: number, behavior?: ScrollBehavior }): void & (x: number, y: number) => void` | 滚动内容 |

src/scrollbar/src/ScrollBar.tsx

@@ -1,10 +1,13 @@
-import { h, defineComponent, PropType } from 'vue'
+import { h, defineComponent, PropType, ref } from 'vue'
 import { NScrollbar } from '../../_internal'
 import { ScrollbarTheme } from '../../_internal/scrollbar/styles'
 import { useTheme, ThemeProps } from '../../_mixins'
 import type { ExtractPublicPropTypes } from '../../_utils'
 
-export type ScrollTo = (x: number, y: number) => void
+export interface ScrollTo {
+  (x: number, y: number): void
+  (options: { left?: number, top?: number, behavior?: ScrollBehavior }): void
+}
 
 export interface ScrollbarInst {
   scrollTo: ScrollTo
@@ -21,8 +24,24 @@ export type ScrollbarProps = ExtractPublicPropTypes<typeof scrollbarProps>
 const Scrollbar = defineComponent({
   name: 'Scrollbar',
   props: scrollbarProps,
-  setup (props, { slots }) {
+  setup () {
-    return () => h(NScrollbar, props, slots)
+    const scrollbarInstRef = ref<ScrollbarInst | null>(null)
+    const exposedMethods: ScrollbarInst = {
+      scrollTo: (...args: any[]) => {
+        scrollbarInstRef.value?.scrollTo(args[0], args[1])
+      }
+    }
+    return {
+      ...exposedMethods,
+      scrollbarInstRef
+    }
+  },
+  render () {
+    return (
+      <NScrollbar ref="scrollbarInstRef" {...this.$props}>
+        {this.$slots}
+      </NScrollbar>
+    )
   }
 })