diff --git a/packages/fiori/src/DynamicPage.hbs b/packages/fiori/src/DynamicPage.hbs
index 77c16dc5269e..f04d9d52d134 100644
--- a/packages/fiori/src/DynamicPage.hbs
+++ b/packages/fiori/src/DynamicPage.hbs
@@ -1,36 +1,39 @@
 <div class="{{classes.root}}">
-  <div class="{{classes.headerWrapper}}">
-    <slot name="titleArea"></slot>
-    {{#if headerInTitle}}
-      <slot name="headerArea"></slot>
-    {{/if}}
+  <div class="{{classes.scrollContainer}}"
+    @scroll="{{snapOnScroll}}">
+    <div class="{{classes.headerWrapper}}">
+      <slot name="titleArea"></slot>
+      {{#if headerInTitle}}
+        <slot name="headerArea"></slot>
+      {{/if}}
 
-    {{#if actionsInTitle}}
-    <ui5-dynamic-page-header-actions
-      ?snapped="{{headerSnapped}}"
-      ?pinned="{{headerPinned}}"
-      @ui5-expand-button-click={{onExpandClick}}
-      @ui5-pin-button-click={{onPinClick}}
-    ></ui5-dynamic-page-header-actions>
-    {{/if}}
+      {{#if actionsInTitle}}
+      <ui5-dynamic-page-header-actions
+        ?snapped="{{headerSnapped}}"
+        ?pinned="{{headerPinned}}"
+        @ui5-expand-button-click={{onExpandClick}}
+        @ui5-pin-button-click={{onPinClick}}
+      ></ui5-dynamic-page-header-actions>
+      {{/if}}
 
-  </div>
+    </div>
 
-  <div class="{{classes.content}}">
-    {{#if headerInContent}}
-      <slot name="headerArea"></slot>
-    {{/if}}
+    <div class="{{classes.content}}">
+      {{#if headerInContent}}
+        <slot name="headerArea"></slot>
+      {{/if}}
 
-    {{#unless actionsInTitle}}
-      <ui5-dynamic-page-header-actions
-          ?snapped="{{headerSnapped}}"
-          ?pinned="{{headerPinned}}"
-          @ui5-expand-button-click={{onExpandClick}}
-          @ui5-pin-button-click={{onPinClick}}
-        ></ui5-dynamic-page-header-actions>
-    {{/unless}}
+      {{#unless actionsInTitle}}
+        <ui5-dynamic-page-header-actions
+            ?snapped="{{headerSnapped}}"
+            ?pinned="{{headerPinned}}"
+            @ui5-expand-button-click={{onExpandClick}}
+            @ui5-pin-button-click={{onPinClick}}
+          ></ui5-dynamic-page-header-actions>
+      {{/unless}}
 
-    <slot></slot>
+      <slot></slot>
+    </div>
   </div>
 
     <div class="{{classes.footer}}">
diff --git a/packages/fiori/src/DynamicPage.ts b/packages/fiori/src/DynamicPage.ts
index 930cfc2e4a72..5030397419cf 100644
--- a/packages/fiori/src/DynamicPage.ts
+++ b/packages/fiori/src/DynamicPage.ts
@@ -72,15 +72,14 @@ class DynamicPage extends UI5Element {
 	_debounceInterval?: Timeout | null;
 	showHeaderInStickArea = false;
 
-	onAfterRendering() {
-		this.addEventListener("scroll", this.snapOnScroll.bind(this));
-	}
-
 	get classes() {
 		return {
 			root: {
 				"ui5-dynamic-page-root": true,
 			},
+			scrollContainer: {
+				"ui5-dynamic-page-scroll-container": true,
+			},
 			headerWrapper: {
 				"ui5-dynamic-page-title-header-wrapper": true,
 			},
@@ -101,6 +100,10 @@ class DynamicPage extends UI5Element {
 		return this.querySelector<DynamicPageHeader>("[ui5-dynamic-page-header]");
 	}
 
+	get scrollContainer(): HTMLElement | null | undefined {
+		return this.getDomRef()?.querySelector(".ui5-dynamic-page-scroll-container");
+	}
+
 	get actionsInTitle(): boolean {
 		return this.headerSnapped || this.showHeaderInStickArea || this.headerPinned;
 	}
@@ -117,18 +120,20 @@ class DynamicPage extends UI5Element {
 				return;
 			}
 
-			if (this.iPreviousScrollAmount === this.scrollTop || this.headerPinned) {
+			const scrollTop = this.scrollContainer!.scrollTop;
+
+			if (this.iPreviousScrollAmount === scrollTop || this.headerPinned) {
 				return;
 			}
 
-			this.iPreviousScrollAmount = this.scrollTop;
+			this.iPreviousScrollAmount = scrollTop;
 
 			if (this.isExpanding) {
 				this.isExpanding = false;
 				return;
 			}
 
-			if (this.scrollTop > this.dynamicPageHeader.getBoundingClientRect().height) {
+			if (scrollTop > this.dynamicPageHeader.getBoundingClientRect().height) {
 				this.headerSnapped = true;
 				this.showHeaderInStickArea = false;
 			} else {
diff --git a/packages/fiori/src/themes/DynamicPage.css b/packages/fiori/src/themes/DynamicPage.css
index a0b390aef08c..2246981aa3af 100644
--- a/packages/fiori/src/themes/DynamicPage.css
+++ b/packages/fiori/src/themes/DynamicPage.css
@@ -10,6 +10,15 @@
 
 :host {
     display: block;
+    height: 100%;
+}
+
+.ui5-dynamic-page-root {
+    height: inherit;
+    overflow-y: hidden;
+}
+
+.ui5-dynamic-page-scroll-container {
     overflow-y: scroll;
     height: 100%;
 }
@@ -24,6 +33,10 @@
     padding: 0 1rem;
 }
 
+:host([show-footer]) .ui5-dynamic-page-content {
+    padding-bottom: 4rem;
+}
+
 :host([show-footer]) .ui5-dynamic-page-footer {
     animation: bounceShow 0.35s forwards ease-in-out;
 }
@@ -32,12 +45,6 @@
     animation: bounceHide 0.35s forwards ease-in-out;
 }
 
-:host {
-    display: block;
-    overflow-y: scroll;
-    height: 100%;
-}
-
 ::slotted([slot="footer"]) {
     /* TODO css vars? */
     border: 1px solid;