Switch to a scroll mode

The scroll mode plugin provides the `switchScrollMode()` function to switch the current layout to a particular scroll mode. It comes in handy when using the full screen plugin.

In this example, we will switch the layout to the wrapped mode when entering the full screen mode. When users exit the full screen mode, we also switch the layout back to the vertical scroll mode as usual.

The `switchScrollMode()` function is triggered in the `onEnterFullScreen` and `onExitFullScreen` callbacks:

import { ScrollMode, SpecialZoomLevel } from '@react-pdf-viewer/core';
import { defaultLayoutPlugin } from '@react-pdf-viewer/default-layout';

const defaultLayoutPluginInstance = defaultLayoutPlugin({
    toolbarPlugin: {
        fullScreenPlugin: {
            onEnterFullScreen: (zoom) => {
                zoom(SpecialZoomLevel.PageFit);
                defaultLayoutPluginInstance.toolbarPluginInstance.scrollModePluginInstance.switchScrollMode(
                    ScrollMode.Wrapped
                );
            },
            onExitFullScreen: (zoom) => {
                zoom(SpecialZoomLevel.PageWidth);
                defaultLayoutPluginInstance.toolbarPluginInstance.scrollModePluginInstance.switchScrollMode(
                    ScrollMode.Vertical
                );
            },
        },
    },
});

Click the Full Screen button in the toolbar (The sample code)

Switch to a scroll mode

See also