Skip to main content

Scrolling Diagram

By default the component's size is set automatically to fit the content. If necessary, the component will take the size of the HTML container and render horizontal and vertical inner scrolls to fit the content.

Scrolling diagram

You can scroll a diagram to the area where the necessary item is situated via the showItem() method of the diagram object.

As an alternative way, you can scroll to the necessary position on the diagram by using the scrollTo() method.

Getting scroll state

The Diagram API allows you to get the current position of the scroll via the related getScrollState() method:

// returning the initial scroll position
const coords = diagram.getScrollState(); // -> {x:0,y:0}

It returns an object with the horizontal and vertical scroll position.

Catching diagram scrolling

You can catch the start of Diagram scrolling using the scroll event. The handler function takes the position of the scroll as a parameter:

  • pos - (object) the position of a scroll as an object with x and y attributes
diagram.events.on("Scroll", function(position) {
alert("The diagram has been scrolled:" position);
});