diff --git a/demo/Semi.Avalonia.Demo/Pages/ScrollViewerDemo.axaml b/demo/Semi.Avalonia.Demo/Pages/ScrollViewerDemo.axaml
new file mode 100644
index 0000000..52882ed
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Pages/ScrollViewerDemo.axaml
@@ -0,0 +1,33 @@
+<UserControl
+    x:Class="Semi.Avalonia.Demo.Pages.ScrollViewerDemo"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    d:DesignHeight="450"
+    d:DesignWidth="800"
+    mc:Ignorable="d">
+    <StackPanel>
+        <ScrollViewer
+            Width="200"
+            Height="200"
+            Margin="10"
+            HorizontalScrollBarVisibility="Auto">
+            <Rectangle
+                Width="300"
+                Height="300"
+                Fill="#FEFBCB" />
+        </ScrollViewer>
+        <ScrollViewer
+            Width="200"
+            Height="200"
+            Margin="10"
+            HorizontalScrollBarVisibility="Auto"
+            Theme="{DynamicResource StaticScrollViewer}">
+            <Rectangle
+                Width="300"
+                Height="300"
+                Fill="#FEFBCB" />
+        </ScrollViewer>
+    </StackPanel>
+</UserControl>
diff --git a/demo/Semi.Avalonia.Demo/Pages/ScrollViewerDemo.axaml.cs b/demo/Semi.Avalonia.Demo/Pages/ScrollViewerDemo.axaml.cs
new file mode 100644
index 0000000..4e73d1b
--- /dev/null
+++ b/demo/Semi.Avalonia.Demo/Pages/ScrollViewerDemo.axaml.cs
@@ -0,0 +1,18 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace Semi.Avalonia.Demo.Pages;
+
+public partial class ScrollViewerDemo : UserControl
+{
+    public ScrollViewerDemo()
+    {
+        InitializeComponent();
+    }
+
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
+}
\ No newline at end of file
diff --git a/demo/Semi.Avalonia.Demo/Views/MainView.axaml b/demo/Semi.Avalonia.Demo/Views/MainView.axaml
index d6a88ef..1e517fc 100644
--- a/demo/Semi.Avalonia.Demo/Views/MainView.axaml
+++ b/demo/Semi.Avalonia.Demo/Views/MainView.axaml
@@ -150,6 +150,9 @@
             <TabItem Header="RepeatButton">
                 <pages:RepeatButtonDemo />
             </TabItem>
+            <TabItem Header="ScrollViewer">
+                <pages:ScrollViewerDemo />
+            </TabItem>
             <TabItem Header="Slider">
                 <pages:SliderDemo />
             </TabItem>
diff --git a/src/Semi.Avalonia/Controls/ScrollViewer.axaml b/src/Semi.Avalonia/Controls/ScrollViewer.axaml
index 85019c2..e377a2d 100644
--- a/src/Semi.Avalonia/Controls/ScrollViewer.axaml
+++ b/src/Semi.Avalonia/Controls/ScrollViewer.axaml
@@ -202,6 +202,57 @@
 
     </ControlTheme>
     <ControlTheme x:Key="{x:Type ScrollViewer}" TargetType="ScrollViewer">
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="Template">
+            <ControlTemplate TargetType="ScrollViewer">
+                <Grid ColumnDefinitions="*,Auto" RowDefinitions="*,Auto">
+                    <ScrollContentPresenter
+                        Name="PART_ContentPresenter"
+                        Grid.RowSpan="2"
+                        Grid.ColumnSpan="2"
+                        Padding="{TemplateBinding Padding}"
+                        Background="{TemplateBinding Background}"
+                        HorizontalSnapPointsAlignment="{TemplateBinding HorizontalSnapPointsAlignment}"
+                        HorizontalSnapPointsType="{TemplateBinding HorizontalSnapPointsType}"
+                        VerticalSnapPointsAlignment="{TemplateBinding VerticalSnapPointsAlignment}"
+                        VerticalSnapPointsType="{TemplateBinding VerticalSnapPointsType}">
+                        <ScrollContentPresenter.GestureRecognizers>
+                            <ScrollGestureRecognizer
+                                CanHorizontallyScroll="{Binding CanHorizontallyScroll, ElementName=PART_ContentPresenter}"
+                                CanVerticallyScroll="{Binding CanVerticallyScroll, ElementName=PART_ContentPresenter}"
+                                IsScrollInertiaEnabled="{Binding IsScrollInertiaEnabled, RelativeSource={RelativeSource TemplatedParent}}" />
+                        </ScrollContentPresenter.GestureRecognizers>
+                    </ScrollContentPresenter>
+                    <ScrollBar
+                        Name="PART_HorizontalScrollBar"
+                        Grid.Row="1"
+                        Grid.Column="0"
+                        Opacity="0"
+                        Orientation="Horizontal" />
+                    <ScrollBar
+                        Name="PART_VerticalScrollBar"
+                        Grid.Row="0"
+                        Grid.Column="1"
+                        Opacity="0"
+                        Orientation="Vertical" />
+                    <Panel
+                        Grid.Row="1"
+                        Grid.Column="1"
+                        Background="{DynamicResource ColorScrollBarBackground}" />
+                </Grid>
+            </ControlTemplate>
+        </Setter>
+        <Style Selector="^:pointerover">
+            <Style Selector="^ /template/ ScrollBar#PART_HorizontalScrollBar">
+                <Setter Property="Opacity" Value="1" />
+            </Style>
+            <Style Selector="^ /template/ ScrollBar#PART_VerticalScrollBar">
+                <Setter Property="Opacity" Value="1" />
+            </Style>
+        </Style>
+    </ControlTheme>
+
+    <ControlTheme x:Key="StaticScrollViewer" TargetType="ScrollViewer">
         <Setter Property="Background" Value="Transparent" />
         <Setter Property="Template">
             <ControlTemplate TargetType="ScrollViewer">
@@ -238,14 +289,6 @@
                 </Grid>
             </ControlTemplate>
         </Setter>
-        <Style Selector="^:pointerover">
-            <Style Selector="^ /template/ ScrollBar#horizontalScrollBar">
-                <Setter Property="Opacity" Value="1" />
-            </Style>
-            <Style Selector="^ /template/ ScrollBar#verticalScrollBar">
-                <Setter Property="Opacity" Value="1" />
-            </Style>
-        </Style>
     </ControlTheme>
 
     <ControlTheme x:Key="SimpleMenuScrollViewer" TargetType="ScrollViewer">