diff --git a/blazor/diagram/images/Autoscroll.gif b/blazor/diagram/images/Autoscroll.gif
index 52c26e860f..9d7ed11e56 100644
Binary files a/blazor/diagram/images/Autoscroll.gif and b/blazor/diagram/images/Autoscroll.gif differ
diff --git a/blazor/diagram/images/ScrollPadding.png b/blazor/diagram/images/ScrollPadding.png
new file mode 100644
index 0000000000..2970c643c6
Binary files /dev/null and b/blazor/diagram/images/ScrollPadding.png differ
diff --git a/blazor/diagram/scroll-settings.md b/blazor/diagram/scroll-settings.md
index b5b5190069..9d85b102cc 100644
--- a/blazor/diagram/scroll-settings.md
+++ b/blazor/diagram/scroll-settings.md
@@ -257,6 +257,52 @@ To explore about the options , refer [ScrollLimitMode](https://help.syncfusion.c
 |   Diagram   | ![ScrollLimitMode as Diagram](./images/ScrollLimitDiagram.gif)|   
 |   Infinity  | ![ScrollLimitMode as Infinity](./images/ScrollLimitInfinity.gif)|
 
+## Scroll Padding
+The [ScrollPadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ScrollSettings.html#Syncfusion_Blazor_Diagram_ScrollSettings_ScrollPadding) property in the scroll settings allows you to extend the scrollable region based on the [ScrollLimit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ScrollSettings.html#Syncfusion_Blazor_Diagram_ScrollSettings_ScrollLimit), when an element is interacted with at the edges of the viewport. It specifies the maximum distance between the object and the edge of the diagram area. This behavior is essential for improving the user experience, especially in large diagrams where users need to extend elements across different parts of the diagram area.
+
+N> The default value is 0 pixels.
+
+The following code example illustrates how to set scroll padding.
+
+```cshtml
+@using Syncfusion.Blazor.Diagram
+<SfDiagramComponent Height="600px" Width="600px" Nodes="@nodes">
+    @* Sets the ScrollSettings for the diagram *@
+    <ScrollSettings ScrollPadding="@ScrollBorder">
+    </ScrollSettings>
+</SfDiagramComponent>
+@code
+{
+    DiagramMargin ScrollBorder = new DiagramMargin() { Left = 100, Right = 100, Top = 100, Bottom = 100 };
+    DiagramObjectCollection<Node> nodes;
+    protected override void OnInitialized()
+    {
+        nodes = new DiagramObjectCollection<Node>();
+        // A node is created and stored in the nodes collection.
+        Node node = new Node()
+            {
+                ID = "node1",
+                // Position of the node.
+                OffsetX = 250,
+                OffsetY = 250,
+                // Size of the node.
+                Width = 100,
+                Height = 100,
+                Style = new ShapeStyle()
+                {
+                    Fill = "#6495ED",
+                    StrokeColor = "white"
+                }
+            };
+        // Add node.
+        nodes.Add(node);
+    }
+}
+```
+![Scoll Padding support for node](images/ScrollPadding.png)
+
+You can download a complete working sample from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/ScrollSettings/ScrollPadding)
+
 ## Scrollable Area
 Scrolling beyond any particular rectangular area can be restricted by using the [ScrollableArea](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ScrollSettings.html#Syncfusion_Blazor_Diagram_ScrollSettings_ScrollableArea) property of scroll settings. To restrict scrolling beyond any custom region, set the [ScrollLimit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ScrollSettings.html#Syncfusion_Blazor_Diagram_ScrollSettings_ScrollLimit) as “limited.” The following code example illustrates how to customize the scrollable area.