Jsplumb beyond the width of the interface how to set the lines drawn to follow the scroll bar?

use jsplumb to draw a flowchart that goes beyond the width of the interface when there is a lot of content.
sets the outermost div to exceed the display scroll bar. It is found that the wires drawn through jsplumb when pulling the scroll bar will not follow the scroll bar.
look at the elements and find that they are actually placed under the < body > tag, so I added a scroll bar to the drawing box to make it impossible to affect it.
looks up the document and says that jsPlumb.setContainer can set the parent container.
but there is no change when it is set up.
is there any good solution to this?

 jsPlumb.ready(function () {
            var common = {
                    isSource: false,
                    isTarget: false,
                    connector: ["Flowchart"],
                    maxConnections: -1,
                    RenderMode : "canvas",
            var j = jsPlumb.getInstance({
                Endpoint: ["Dot", {radius: 3}], //
            j.addEndpoint("Aid",{uuid:"A" , anchor: "BottomCenter"},common);
                   paintStyle: { stroke: "-sharp0099cc", strokeWidth: 2 }, 
                   endpointStyle: { fill: "blue", outlineStroke: "darkgray", outlineWidth: 0 },

jsPlumb.setContainer($("-sharpdiagramContainer")) // jsPlumbj
var j = jsPlumb.getInstance({
            Endpoint: ["Dot", {radius: 3}], //

Hello, I also encountered endpoint dislocation when I exceeded the height of the page at first.
then, as you said, a {position: relative;} attribute is added to the parent container, which displays normally, but the part beyond the height of the page is misplaced when the operation connects two points

when the mouse exceeds the width of the page, the mouse cursor and the starting point of the endpoint are misplaced.