fix(layout): scrollTo not working with native scrollbar

CHANGELOG.en-US.md

@@ -2,6 +2,10 @@
 
 ## Pending
 
+### Breaking Changes
+
+- `n-layout-sider` removed `show-content` prop. Please use `show-collapsed-content` instead.
+
 ### Feats
 
 - `n-data-table` support tree data.
@@ -25,6 +29,7 @@
 
 ### Fixes
 
+- `n-layout` & `n-layout-sider`'s `scrollTo` not working with native scrollbar.
 - `n-layout-sider`'s `collapse-mode` not working.
 - Internal selection component's theme peers has wrong key for popover.
 

CHANGELOG.zh-CN.md

@@ -2,6 +2,10 @@
 
 ## Pending
 
+### Breaking Changes
+
+- `n-layout-sider` 移除了 `show-content`，使用 `show-collapsed-content` 代替
+
 ### Feats
 
 - `n-data-table` 支持树形数据
@@ -25,6 +29,7 @@
 
 ### Fixes
 
+- `n-layout` & `n-layout-sider` 的 `scrollTo` 在使用原生滚动条时不生效
 - `n-layout-sider` 的 `collapse-mode` 属性不生效
 - 内部 selection 组件的主题 peers 中 popover 的 key 不正确
 

src/layout/index.ts

@@ -1,5 +1,5 @@
 export { default as NLayout } from './src/Layout'
-export { default as NLayoutContent } from './src/Layout'
+export { default as NLayoutContent } from './src/LayoutContent'
 export { default as NLayoutHeader } from './src/LayoutHeader'
 export { default as NLayoutFooter } from './src/LayoutFooter'
 export { default as NLayoutSider } from './src/LayoutSider'

src/layout/src/Layout.tsx

@@ -40,15 +40,16 @@ export const layoutInjectionKey: InjectionKey<
 ExtractPropTypes<LayoutProps>
 > = Symbol('layout')
 
-export default defineComponent({
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-  name: 'Layout',
+export function createLayoutComponent (isContent: boolean) {
-  alias: ['LayoutContent'],
+  return defineComponent({
+    name: isContent ? 'LayoutContent' : 'Layout',
     props: {
       ...(useTheme.props as ThemeProps<LayoutTheme>),
       ...layoutProps
     },
     setup (props) {
-    const selfRef = ref<HTMLElement | null>(null)
+      const scrollableDivRef = ref<HTMLElement | null>(null)
       const scrollbarRef = ref<ScrollbarInst | null>(null)
       const { mergedClsPrefixRef } = useConfig(props)
       const themeRef = useTheme(
@@ -65,8 +66,8 @@ export default defineComponent({
       ): void => {
         if (scrollbarRef.value) {
           scrollbarRef.value.scrollTo(options as any, y as any)
-      } else if (selfRef.value) {
+        } else if (scrollableDivRef.value) {
-        selfRef.value.scrollTo(options as any, y as any)
+          scrollableDivRef.value.scrollTo(options as any, y as any)
         }
       }
       const scrollableDivStyleRef = computed(() => {
@@ -81,7 +82,7 @@ export default defineComponent({
       if (__DEV__) provide(layoutInjectionKey, props)
       return {
         mergedClsPrefix: mergedClsPrefixRef,
-      selfRef,
+        scrollableDivRef,
         scrollbarRef,
         scrollableDivStyle: scrollableDivStyleRef,
         scrollTo,
@@ -103,8 +104,8 @@ export default defineComponent({
       const { mergedClsPrefix } = this
       return (
         <div
-        ref="selfRef"
           class={[
+            isContent && `${mergedClsPrefix}-layout-content`,
             `${mergedClsPrefix}-layout`,
             `${mergedClsPrefix}-layout--${this.position}-positioned`,
             this.hasSider && `${mergedClsPrefix}-layout--has-sider`
@@ -124,6 +125,7 @@ export default defineComponent({
             </NScrollbar>
           ) : (
             <div
+              ref="scrollableDivRef"
               class={`${mergedClsPrefix}-layout__content`}
               style={this.scrollableDivStyle}
             >
@@ -133,4 +135,7 @@ export default defineComponent({
         </div>
       )
     }
-})
+  })
+}
+
+export default createLayoutComponent(false)

src/layout/src/LayoutContent.tsx

@@ -0,0 +1,3 @@
+import { createLayoutComponent } from './Layout'
+
+export default createLayoutComponent(true)

src/layout/src/LayoutSider.tsx

@@ -48,7 +48,7 @@ const layoutSiderProps = {
     default: undefined
   },
   defaultCollapsed: Boolean,
-  showContent: {
+  showCollapsedContent: {
     type: Boolean,
     default: true
   },
@@ -106,7 +106,7 @@ export default defineComponent({
         }
       }
     }
-    const selfRef = ref<HTMLElement | null>(null)
+    const scrollableDivRef = ref<HTMLElement | null>(null)
     const scrollbarRef = ref<ScrollbarInst | null>(null)
     const styleMaxWidthRef = computed(() => {
       return formatLength(
@@ -140,11 +140,11 @@ export default defineComponent({
     function scrollTo (options: ScrollToOptions | number, y?: number): void {
       if (scrollbarRef.value) {
         scrollbarRef.value.scrollTo(options as any, y as any)
-      } else if (selfRef.value) {
+      } else if (scrollableDivRef.value) {
         if (y === undefined) {
-          selfRef.value.scrollTo(options as any)
+          scrollableDivRef.value.scrollTo(options as any)
         } else {
-          selfRef.value.scrollTo(options as any, y as any)
+          scrollableDivRef.value.scrollTo(options as any, y as any)
         }
       }
     }
@@ -183,7 +183,7 @@ export default defineComponent({
       mergedClsPrefixRef
     )
     return {
-      selfRef,
+      scrollableDivRef,
       scrollbarRef,
       mergedClsPrefix: mergedClsPrefixRef,
       mergedTheme: themeRef,
@@ -227,13 +227,13 @@ export default defineComponent({
     const { mergedClsPrefix } = this
     return (
       <aside
-        ref="selfRef"
         class={[
           `${mergedClsPrefix}-layout-sider`,
           `${mergedClsPrefix}-layout-sider--${this.position}-positioned`,
           this.bordered && `${mergedClsPrefix}-layout-sider--bordered`,
           this.mergedCollapsed && `${mergedClsPrefix}-layout-sider--collapsed`,
-          this.showContent && `${mergedClsPrefix}-layout-sider--show-content`
+          (!this.mergedCollapsed || this.showCollapsedContent) &&
+            `${mergedClsPrefix}-layout-sider--show-content`
         ]}
         style={[
           this.cssVars,
@@ -269,6 +269,7 @@ export default defineComponent({
           <div
             class={`${mergedClsPrefix}-layout-sider__content`}
             style={this.scrollableDivStyle}
+            ref="scrollableDivRef"
           >
             {this.$slots}
           </div>

src/layout/src/styles/layout.cssr.ts

@@ -26,6 +26,7 @@ export default cB('layout', `
       `)
     ])
   ]),
+  cE('content', 'box-sizing: border-box;'),
   cM('absolute-positioned', `
     position: absolute;
     left: 0;