Last updated

Scroll Bars

By default annotated widget has both scrollbars visible and active

# Basic Scroll Bars

This section demonstrates default scrollbars.

import { createPlotAndTools } from "/src/code/Carnac/Tools/Scrollbars/createPlotAndTools.ts";
function createScene(canvas) {
  return createPlotAndTools(canvas);
}
export { createScene };

createScene(document.querySelector('[ref="plot"]'));

# Compact Scroll Bars

This section demonstrates how to customize default scrollbar and make it look 'compact'.

import { createPlotAndTools } from "/src/code/Carnac/Tools/Scrollbars/createPlotAndTools.ts";
function createScene(canvas) {
  return createPlotAndTools(canvas, {
    "resizable": false,
    "rounded": true,
    "size": 10
  });
}
export { createScene };

createScene(document.querySelector('[ref="plot"]'));

# Floating Scroll Bars

This section demonstrates how to customize default scrollbar and make it 'float'.

import { createPlotAndTools } from "/src/code/Carnac/Tools/Scrollbars/createPlotAndTools.ts";
function createScene(canvas) {
  return createPlotAndTools(canvas, {
    "resizable": false,
    "rounded": true,
    "size": 10
  }, true);
}
export { createScene };

createScene(document.querySelector('[ref="plot"]'));