如何仅使用 JavaScript 和 SVG.js 制作滚动条？

如何解决如何仅使用 JavaScript 和 SVG.js 制作滚动条？

我正在尝试创建一个滚动条（只有滚动条没有实际滚动的内容），但在实际使滚动条可滚动时遇到了很多麻烦。我在另一个矩形内使用了一个矩形来模拟各种滚动条。我需要一些帮助来使滚动条具有交互性。

代码：（源文件）

var draw = SVG().addTo('body').size('120%','150%');


var MyToolkit = (function() {

    var scrollBar = function(height)
{
    var bar = draw.group();

    var rect = draw.rect(20,height).fill('white').opacity("0.4").stroke('black')
    var thumb = draw.rect(20,20).fill('black')


    bar.add(rect)
    bar.add(thumb)

    return {
        move: function(x,y) {
            rect.move(x,y);
            rect.x = x;
            rect.y = y;
            thumb.move(x,y)
        },}

}

return {scrollBar}
}());

export{MyToolkit}

} 函数调用代码：

    var x = new MyToolkit.scrollBar(300);
    x.move(100,800)