diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index 59fb6e66273..ced3214151e 100644
--- a/CHANGELOG.en-US.md
+++ b/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`.
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index d5bb9c52b25..bfea4658770 100644
--- a/CHANGELOG.zh-CN.md
+++ b/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` 的错误警报
diff --git a/src/layout/demos/enUS/index.demo-entry.md b/src/layout/demos/enUS/index.demo-entry.md
index 4599b466f02..0edd8c7f4ef 100644
--- a/src/layout/demos/enUS/index.demo-entry.md
+++ b/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
diff --git a/src/layout/demos/zhCN/index.demo-entry.md b/src/layout/demos/zhCN/index.demo-entry.md
index b4cca4dc845..f97e120499c 100644
--- a/src/layout/demos/zhCN/index.demo-entry.md
+++ b/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
diff --git a/src/layout/src/Layout.tsx b/src/layout/src/Layout.tsx
index a1f1745728a..40584c36461 100644
--- a/src/layout/src/Layout.tsx
+++ b/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}
diff --git a/src/layout/src/LayoutSider.tsx b/src/layout/src/LayoutSider.tsx
index 16253f1cc13..9d0c49e7135 100644
--- a/src/layout/src/LayoutSider.tsx
+++ b/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,