feat(n-layout): add scroll event

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

@@ -34,6 +34,7 @@ scroll-to
 | embedded | `boolean` | `false` | Use darker background to show a embedded effect. Only work for light theme. |
 | has-sider | `boolean` | `false` | Whether the component has sider inside. If so it must be `true`. |
 | 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. |
+| on-scroll | `(e: Event) => void` | `undefined` | Callback function when the content scroll. |
 | 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. |
 
@@ -72,6 +73,7 @@ scroll-to
 | trigger-style | `string \| Object` | `undefined` | Trigger style. |
 | width | `number \| string` | `272` | Width CSS value. When it is number, px will be added. |
 | on-update:collapsed | `(collapsed: boolean) => void` | `undefined` | Callback function when the folding state changes. |
+| on-scroll | `(e: Event) => void` | `undefined` | Callback function when the content scroll. |
 
 ### Layout, Layout Content, Layout Sider, Layout Header, Layout Footer Slots
 

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

@@ -34,6 +34,7 @@ scroll-to
 | embedded | `boolean` | `false` | 使用更深的背景色展现嵌入效果，只对亮色主题生效 |
 | has-sider | `boolean` | `false` | 组件内部是否有边栏，如果有的话必须设为 `true` |
 | native-scrollbar | `boolean` | `true` | 是否在自身使用原生滚动条。如果设定为 `false`，`Layout` 将会对内容使用 `naive-ui` 风格的滚动条 |
+| on-scroll | `(e: Event) => void` | `undefined` | 内容的滚动事件回调函数 |
 | position | `'static' \| 'absolute'` | `'static'` | `static` 模式将会把 CSS `position` 设为 `static`，`absolute` 模式将会把 CSS `position` 设为 `absolute`，还将 `left`、`right`、`top`、`bottom` 设为 `0`。`absolute` 模式在你想将内容在一个固定容器或者将这个页面的布局设为固定位置的时候很有用。你可能需要修改一些 style 来确保它按照你预想的方式展示 |
 | sider-placement | `'left' \| 'right'` | `left` | 组件折叠侧边栏在哪一侧 |
 
@@ -72,6 +73,7 @@ scroll-to
 | trigger-style | `string \| Object` | `undefined` | 触发器样式 |
 | width | `number \| string` | `272` | 宽度的 CSS 值，为数字时会添加 px |
 | on-update:collapsed | `(collapsed: boolean) => void` | `undefined` | 折叠状态发生改变时的回调函数 |
+| on-scroll | `(e: Event) => 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,