fabric-lib-scrollbars

[zhe-he]

I created a scrollbar using the canvas, where you can customize the scrollbar's stroke width, stroke color, fill color, minimum size, and more. Since the canvas must support zooming to enable the scrollbar, a mousewheel event is also provided. You can configure the maximum and minimum zoom levels.

Here’s a demo:
demo

how to use

import { Scrollbars } from "./lib/scrollbars";
import { makeMouseWheel } from "./lib/scrollbars/util";

const mousewheel = makeMouseWheel(canvas);
canvas.on("mouse:wheel", mousewheel);
const scrollbar = new Scrollbars(canvas);

// dispose
// scrollbar.dispose();
// canvas.off("mouse:wheel", mousewheel);

[zhe-he]

2024-12-31.16.12.50.mov

Because the video has been compressed, it appears somewhat blurry