Switching between scrollModes


I got a couple questions.

  1. I am currently switching between scrollMods from diagram.scrollMode= go.Diagram.InfiniteScroll to diagram.scrollMode= go.Diagram.DocumentScroll. After doing so the scrollbar does not show up until I actively scroll. It looks like the child of the <div> that is a sibling of the <canvas> has a width of 1px until I scroll. I deal with this by programmatically running diagram.scroll(‘pixel’, ‘right’, 1) then diagram.scroll(‘pixel’, ‘left’, 1), but it would be nice if I did not have to do that.

  2. It seems like when I change from DocumentScroll to InfiniteScroll the viewport jumps to position (0,0). Is there any way to avoid this? I have some other things going on at the same time, so maybe it does not have to do with the scroll mode being changed, but it seems like it is.

  3. Have ya’ll given any thought to providing an ID to the <canvas> and the <div> elements that GoJS creates so that users can use getElementById on them?


  1. That does seem like a bug – thanks for pointing it out.
  2. That’s definitely not happening in the sample I’m experimenting with.
  3. The contents of the DIV that you pass to the Diagram are intentionally not documented because we expect to change the details. In fact, they have already changed at least once that I can recall.

We have fixed #1 and it will be out in the next release. For now you can call myDiagram.redraw() afterwards as a workaround. Be sure to remove this when updating, though.

#2 Do you mean switching from InfiniteScroll to DocumentScroll? It will force the Diagram back into a “correct” viewport, if there is empty space (only possible with infinite scroll) in view.


Thanks for the quick replies.

I took another look at the #2 issue that I am seeing, and I don’t think it actually has to do with scrollMode. I think it’s more of a padding/resizing issue.

Basically what I am trying to do is have a GoJS canvas that has DocumentScroll. I want to expand the canvas div’s width. But if I do so when the graph is scrolled all the way to the right, the graph ‘pops’ so that the right margin of the graph moves to the new right most position of the canvas div and all the nodes shift. This is totally expected and makes sense, but I am trying to make it appear as if the canvas was infinite, so that when the canvas div’s width is expanded, the nodes that are visible do not move and the padding of the graph is expanded instead. To do this I tried to expand the padding of the go diagram, but expanding padding is not instantaneous as far as I can tell.

My work around is to add padding, use InfiniteScroll while the new padding is implemented and then turn the scrollMode back to DocumentScroll. This way I can expand a window and none of the visible nodes move.

If there is a better way to do this, or a way to make padding take effect immediately, please let me know.

or a way to make padding take effect immediately

To make any operation like expanding padding instantaneous, you can use a transaction. If that still doesn’t, you can call the undocumented diagram.redraw() and it ought to. This is inefficient, but fine for places where you want to force all state to update right away.

Thanks Simon, wrapping the padding expansion in a transaction seems to have made it instantaneous and allowed me to clean up that part of my code.