!!!###!!!title=Scroller——VisActor/VGraph tutorial documents!!!###!!!!!!###!!!description=The Scroller is a scrollbar component in vGraph used for scrolling, panning, and zooming the canvas. When this component is enabled, do not add `panZoom` and `dragCanvas` interactions simultaneously; related capabilities can be configured uniformly within the component.Here is an example of how to use the Scroller component. You can also try it out in the demo.```javascriptimport { Graph, Scroller} from "@visactor/vgraph";const scroller = new Scroller(graph, scrollerOptions );```!!!###!!!

Scroller

The Scroller is a scrollbar component in vGraph used for scrolling, panning, and zooming the canvas. When this component is enabled, do not add panZoom and dragCanvas interactions simultaneously; related capabilities can be configured uniformly within the component.

Here is an example of how to use the Scroller component. You can also try it out in the demo.

import { Graph, Scroller} from "@visactor/vgraph";
const scroller = new Scroller(graph, scrollerOptions );

Configuration

FieldTypeDescription
sizenumberThe size of the scrollbar style, in px. The default value is 10.
paddingnumber | number[]The padding value for the scrollbar at the graph's border. Defaults to 10. If set to undefined or null, the graph's padding will be used.
show'always' | 'hover'The display method for the scrollbar. Defaults to 'hover'.
dragCanvasboolean | Record<string, any>Whether to enable the dragCanvas interaction, defaults to true. You can also pass parameter configurations for the dragCanvas interaction.
panZoomboolean | Record<string, any>Whether to enable the panZoom interaction, defaults to true. You can also pass parameter configurations for the panZoom interaction.