Scrolling in .NET MAUI PDF Viewer (SfPdfViewer)

19 Aug 20254 minutes to read

The .NET MAUI PDF Viewer provides built-in scrolling capabilities that allow users to navigate through PDF content smoothly. This guide covers how to control scroll positions programmatically, detect scroll changes, and manage scroll-related UI elements.

WARNING

Since the PDF Viewer includes built-in scrolling, avoid placing it inside other scrollable containers like ScrollView, as this may lead to unexpected behavior.

Programmatic Scrolling

Use the ScrollToOffset method to scroll to a specific horizontal and vertical offset. Offset values are measured in device-independent units. If the specified offset is invalid or out of bounds, the scroll action will be ignored and the viewer will retain its current position.

// Scroll to position (100, 1000)
PdfViewer.ScrollToOffset(100, 1000);

Detect Scroll Changes

You can monitor scroll changes using the PropertyChanged event. By monitoring the HorizontalOffset and VerticalOffset property changes, you can respond to both the horizontal and vertical scroll movements respectively.

The following is the code example for subscribing to the PropertyChanged event.

<syncfusion:SfPdfViewer 
    x:Name = "PdfViewer" PropertyChanged = "PdfViewer_PropertyChanged"/>
void SubscribeToPropertyChangedEvent()
{
    SfPdfViewer PdfViewer = new SfPdfViewer();
    // Subscribe to property changed event.
    PdfViewer.PropertyChanged += PdfViewer_PropertyChanged;
}

The following code example illustrates how implement the event handler and to respond to both horizontal and vertical scroll changes:

private void PdfViewer_PropertyChanged(object sender, 
    System.ComponentModel.PropertyChangedEventArgs e)
{
    if (e.PropertyName == nameof(SfPdfViewer.HorizontalOffset))
    {
        // Horizontal scroll change detected
        // Your code here
    }
    else if (e.PropertyName == nameof(SfPdfViewer.VerticalOffset))
    {
        // Vertical scroll change detected
        // Your code here
    }
}

Detecting End of Document

You can determine if the control has reached the vertical end of the document by evaluating the following properties:

  • VerticalOffset: It provides the current vertically scrolled offset.
  • ClientRectangle: It provides the viewport area bounds.
  • ExtentHeight: It provides the overall vertical height of the PDF document.

Below is the code example to detect whether the control has reached the vertical end of the document.

private void PdfViewer_PropertyChanged(object sender, 
    System.ComponentModel.PropertyChangedEventArgs e)
{
    if (e.PropertyName == nameof(SfPdfViewer.VerticalOffset))
    {
        // Determine if the control has reached the vertical end of the document.
        bool isVerticalEndReached = (PdfViewer.VerticalOffset + 
            PdfViewer.ClientRectangle.Height >= PdfViewer.ExtentHeight);
    }
}

Similarly, for horizontal end detection, refer to the following code example.

private void PdfViewer_PropertyChanged(object sender, 
    System.ComponentModel.PropertyChangedEventArgs e)
{
    if (e.PropertyName == nameof(SfPdfViewer.HorizontalOffset))
    {
        // Determine if the control has reached the horizontal end of the document.
        bool isHorizontalEndReached = (PdfViewer.HorizontalOffset + 
            PdfViewer.ClientRectangle.Width >= PdfViewer.ExtentWidth);
    }
}

Scroll Head (Mobile Platforms)

On Android and iOS platforms, the scroll head offers a quick way to move through pages. Users can drag the thumb indicator to scroll within the PDF document.

Scroll Head

Tap the scroll head to open a page navigation dialog. Enter a valid page number and tap OK to jump directly to that page.

Page navigation by tapping scroll head

Show or Hide the Scroll Head

Use the ShowScrollHead property to control the visibility of the scroll head.

// Hide the scroll head thumb
PdfViewer.ShowScrollHead = false;

NOTE

The scroll head is available only on mobile platforms. It is not supported on Windows or macOS.