When a user zooms in/out or pans with a PaperJS canvas, they're not moving the actual canvas in the DOM or increasing the canvas element's size. Instead, they're changing the viewing relationship to content within the canvas element.
Thus the scrollbars need to be created in the canvas element but there doesn't appear to be a way to lock the scrollbars ratio. For example, if the scrollbars are in the canvas context and you zoom in, you're zooming on all of the canvas content and the scrollbars change in size as well. It seems like the only solution would be to have some sort of listener in place that always sets their size, position, etc in relation to the zoom/pan state of the canvas, which seems like a lot of extra code. Has anyone come across a solution for this?
You would have to do what you commented on the end of your question.
const scrollHeight = view.heightview.onFramescrollObject.bounds.height = scrollHeight / view.zoomobj.bounds.top, the lowest objects bottom bounds obj.bounds.bottom, and finally use the current view position center to calculate the handle position view.bounds.center