Skip to content

932478 - How to hide ScrollHead #3506

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Aug 11, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added MAUI/PDF-Viewer/Images/ScrollHead.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
46 changes: 36 additions & 10 deletions MAUI/PDF-Viewer/Scrolling.md
Original file line number Diff line number Diff line change
@@ -1,32 +1,32 @@
---
layout: post
title: Scrolling in .NET MAUI PDF Viewer Control | Syncfusion
description: Learn here all about scrolling functionality in .NET MAUI PDF Viewer including programmatically setting scroll positions and detecting scroll changes.
description: Explore scrolling features in .NET MAUI PDF Viewer, including how to set scroll positions programmatically and detect scroll changes in real time.
platform: MAUI
control: SfPdfViewer
documentation: ug
---

# Scrolling in .NET MAUI PDF Viewer (SfPdfViewer)

The NET MAUI PDF Viewer has scrolling capabilities that allow users to navigate through content seamlessly. This section will walk you through various aspects of scrolling, including programmatically setting scroll positions and detecting scroll changes.
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.

W> Please note that since the PDF Viewer has built-in scrolling capability, it is advised to avoid placing the PDF Viewer inside other controls that also offer scrolling, such as [ScrollView](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/scrollview?view=net-maui-8.0). Nesting within such controls may cause unexpected issues.
W> Since the PDF Viewer includes built-in scrolling, avoid placing it inside other scrollable containers like [ScrollView](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/scrollview?view=net-maui-8.0), as this may lead to unexpected behavior.

## Navigate to the desired offset programmatically
## Programmatic Scrolling

The [ScrollToOffset](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_ScrollToOffset_System_Double_System_Double_) method moves the scroll position of the SfPdfViewer to the specified horizontal and vertical offsets. If the specified offset value is wrong, the scroll will not happen, and the older position will be retained. The offset values are represented in device-independent units.
Use the [ScrollToOffset](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_ScrollToOffset_System_Double_System_Double_) 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.

{% tabs %}
{% highlight c# %}
// Navigate to the scroll offset position (100,1000).
// Scroll to position (100, 1000)
PdfViewer.ScrollToOffset(100, 1000);
{% endhighlight %}
{% endtabs %}

## Scroll changes detection
## Detect Scroll Changes

The `PropertyChanged` event can be used to identify the scroll changes in the PDF Viewer effectively. By monitoring the [HorizontalOffset](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_HorizontalOffset) and [VerticalOffset](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_VerticalOffset) property changes, you can respond to both the horizontal and vertical scroll movements respectively.
You can monitor scroll changes using the `PropertyChanged` event. By monitoring the [HorizontalOffset](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_HorizontalOffset) and [VerticalOffset](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_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.

Expand All @@ -49,7 +49,7 @@ void SubscribeToPropertyChangedEvent()
{% endhighlight %}
{% endtabs %}

Handle scroll changes by implementing the event handler method. The following code example illustrates how to respond to both horizontal and vertical scroll changes:
The following code example illustrates how implement the event handler and to respond to both horizontal and vertical scroll changes:

{% tabs %}
{% highlight c# %}
Expand All @@ -70,7 +70,7 @@ private void PdfViewer_PropertyChanged(object sender,
{% endhighlight %}
{% endtabs %}

## Detecting the end of the document
## Detecting End of Document

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

Expand Down Expand Up @@ -109,5 +109,31 @@ private void PdfViewer_PropertyChanged(object sender,
PdfViewer.ClientRectangle.Width >= PdfViewer.ExtentWidth);
}
}

{% endhighlight %}
{% endtabs %}

## 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](Images\ScrollHead.png)

### Page Navigation via 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](Images\PageNavigationUsingScrollHead.gif)

### Show or Hide the Scroll Head

Use the [ShowScrollHead](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_ShowScrollHead) property to control the visibility of the scroll head.

{% tabs %}
{% highlight c# %}
// Hide the scroll head thumb
PdfViewer.ShowScrollHead = false;
{% endhighlight %}
{% endtabs %}

N> The scroll head is available only on **mobile platforms**. It is not supported on **Windows** or **macOS**.
11 changes: 0 additions & 11 deletions MAUI/PDF-Viewer/UI-Customization.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,6 @@ documentation: ug

This section walks you through the UI customization options supported in the [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html).

## Show or hide the scroll head

You can scroll through the pages by simply dragging the scroll head in the UI. The [SfPdfViewer](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html) allows you to show or hide the scroll head thumb displayed using the [ShowScrollHead](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.PdfViewer.SfPdfViewer.html#Syncfusion_Maui_PdfViewer_SfPdfViewer_ShowScrollHead) property. Refer to the following code example.

{% tabs %}
{% highlight c# %}
// Hide the scroll head thumb
PdfViewer.ShowScrollHead = false;
{% endhighlight %}
{% endtabs %}

## Customize the loading indicator

You can customize the loading indicator’s properties by applying a style with the `TargetType` property to `ActivityIndicator`. You may also need to set the [ApplyToDerivedTypes](https://learn.microsoft.com/en-us/dotnet/maui/user-interface/styles/xaml?view=net-maui-7.0#apply-a-style-to-derived-types) property to `True` to get the style applied to the derived classes. See the following code example to customize the color of the loading indicator.
Expand Down