feat(layout): add scroll event (#1296)

* feat(n-layout): add scroll event

* optimization

Co-authored-by: Jiwen Bai <56228105@qq.com>

CHANGELOG.en-US.md

@@ -2,6 +2,10 @@
 
 ## Pending
 
+### Feats
+
+- `n-layout` and `n-layout-sider` add `on-scroll` prop，closes [#1232](https://github.com/TuSimple/naive-ui/issues/1232).
+
 ### Fixes
 
 - Fix `n-menu`'s incorrect warning on `default-expanded-keys`.

CHANGELOG.zh-CN.md

@@ -2,6 +2,10 @@
 
 ## Pending
 
+### Feats
+
+- `n-layout` 和 `n-layout-sider` 增加 `on-scroll` 属性，关闭 [#1232](https://github.com/TuSimple/naive-ui/issues/1232)
+
 ### Fixes
 
 - 修复 `n-menu` 对于 `default-expanded-keys` 的错误警报

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

@@ -36,6 +36,7 @@ scroll-to
 | native-scrollbar | `boolean` | `true` | Whether to use native scrollbar on itself. If set to `false`, layout will use a naive-ui style scrollbar for content. |
 | position | `'static' \| 'absolute'` | `'static'` | `static` position will make it css position set to `static`. `absolute` position will make it css position set to `absolute` and `left`, `right`, `top`, `bottom` to `0`. `absolute` position is very useful when you want to make content scroll in a fixed container or make the whole page's layout in a fixed position. You may need to change the style of the component to make it display as you expect. |
 | sider-placement | `'left' \| 'right'` | `left` | The sidebar is displayed on the left or the right side. |
+| on-scroll | `(e: Event) => void` | `undefined` | Callback function when the content scroll. |
 
 ### Layout Footer Props
 
@@ -71,6 +72,7 @@ scroll-to
 | show-trigger | `boolean \| 'bar' \| 'arrow-circle'` | `false` | Whether to show the built-in trigger button on sider. |
 | trigger-style | `string \| Object` | `undefined` | Trigger style. |
 | width | `number \| string` | `272` | Width CSS value. When it is number, px will be added. |
+| on-scroll | `(e: Event) => void` | `undefined` | Callback function when the content scroll. |
 | on-update:collapsed | `(collapsed: boolean) => void` | `undefined` | Callback function when the folding state changes. |
 
 ### Layout, Layout Content, Layout Sider, Layout Header, Layout Footer Slots

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

@@ -36,6 +36,7 @@ scroll-to
 | native-scrollbar | `boolean` | `true` | 是否在自身使用原生滚动条。如果设定为 `false`，`Layout` 将会对内容使用 `naive-ui` 风格的滚动条 |
 | position | `'static' \| 'absolute'` | `'static'` | `static` 模式将会把 CSS `position` 设为 `static`，`absolute` 模式将会把 CSS `position` 设为 `absolute`，还将 `left`、`right`、`top`、`bottom` 设为 `0`。`absolute` 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示 |
 | sider-placement | `'left' \| 'right'` | `left` | 组件折叠侧边栏在哪一侧 |
+| on-scroll | `(e: Event) => void` | `undefined` | 内容的滚动事件回调函数 |
 
 ### Layout Footer Props
 
@@ -71,6 +72,7 @@ scroll-to
 | show-trigger | `boolean \| 'bar' \| 'arrow-circle'` | `false` | 内置的触发按钮是否展示 |
 | trigger-style | `string \| Object` | `undefined` | 触发器样式 |
 | width | `number \| string` | `272` | 宽度的 CSS 值，为数字时会添加 px |
+| on-scroll | `(e: Event) => void` | `undefined` | 内容的滚动事件回调函数 |
 | on-update:collapsed | `(collapsed: boolean) => void` | `undefined` | 折叠状态发生改变时的回调函数 |
 
 ### Layout, Layout Content, Layout Sider, Layout Header, Layout Footer Slots

src/layout/src/Layout.tsx

@@ -27,6 +27,7 @@ const layoutProps = {
     default: true
   },
   scrollbarProps: Object as PropType<Partial<ScrollbarProps>>,
+  onScroll: Function as PropType<(e: Event) => void>,
   contentStyle: {
     type: [String, Object] as PropType<string | CSSProperties>,
     default: ''
@@ -128,12 +129,14 @@ export function createLayoutComponent (isContent: boolean) {
               ref="scrollableElRef"
               class={`${mergedClsPrefix}-layout-scroll-container`}
               style={[this.contentStyle, hasSiderStyle] as any}
+              onScroll={this.onScroll}
             >
               {this.$slots}
             </div>
           ) : (
             <NScrollbar
               {...this.scrollbarProps}
+              onScroll={this.onScroll}
               ref="scrollbarInstRef"
               theme={this.mergedTheme.peers.Scrollbar}
               themeOverrides={this.mergedTheme.peerOverrides.Scrollbar}

src/layout/src/LayoutSider.tsx

@@ -82,7 +82,8 @@ const layoutSiderProps = {
   >,
   // deprecated
   onExpand: [Function, Array] as PropType<MaybeArray<() => void>>,
-  onCollapse: [Function, Array] as PropType<MaybeArray<() => void>>
+  onCollapse: [Function, Array] as PropType<MaybeArray<() => void>>,
+  onScroll: Function as PropType<(e: Event) => void>
 } as const
 
 export type LayoutSiderProps = ExtractPublicPropTypes<typeof layoutSiderProps>
@@ -259,6 +260,7 @@ export default defineComponent({
         {!this.nativeScrollbar ? (
           <NScrollbar
             {...this.scrollbarProps}
+            onScroll={this.onScroll}
             ref="scrollbarInstRef"
             style={this.scrollContainerStyle}
             contentStyle={this.contentStyle}
@@ -280,6 +282,7 @@ export default defineComponent({
         ) : (
           <div
             class={`${mergedClsPrefix}-layout-sider-scroll-container`}
+            onScroll={this.onScroll}
             style={[
               this.scrollContainerStyle,
               this.contentStyle,