Enabling vertical scrolling of html in the Chromium web browser control

A short post comtaining some example XAML code on how to enable vertical scrolling in a WFP application containing a Scrollviewer command that uses the CEFsharp browser control.

Step 1: Create a new WPF project

Step 2: Install CEFsharp

See this post on how to use NuGet to install CEFsharp:

Using the CefSharp Chromium Web Browser in WPF / XAML

Step 3: Update the XAML code

MainWindowViewModel.cs

A border and margin is used so that we can better illustrate how the web browser content may be scrolled when the size (height) of the content being viewed exceeds the
size of the WPF window.

The url of the Chromium browser is set to be the Amazon website address.

The height of the Chromium web browser control is set to 800 so that it exceed the height of the control, thereby forcing the vertical scrollbar to become visible.

<Window x:Class="CefSharpScroll.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        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"
        xmlns:wpf="clr-namespace:CefSharp.Wpf;assembly=CefSharp.Wpf"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
   
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="10" />
            <RowDefinition Height="*" />
            <RowDefinition Height="10" />
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="10" />
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="10" />
        </Grid.ColumnDefinitions>

        <Border 
            Grid.Row="1"
            Grid.Column="1"
            Background="GhostWhite" 
            BorderBrush="Silver" 
            BorderThickness="1" 
            CornerRadius="8,8,3,3">

            <ScrollViewer Margin="5, 5, 5, 5">
                <wpf:ChromiumWebBrowser
                    VerticalAlignment="Top"
                    VerticalContentAlignment="Top"
                    Height="800"                  
                    FrameLoadEnd="Browser_OnFrameLoadEnd"
                    Address="www.amazon.co.uk" />
            </ScrollViewer>
        </Border>
    </Grid>
</Window>

Step 4: Try it:

On running the program see that the Chromium web browser is made to browse the Amazon site and the vertical scrolling becomes enabled:

`