Skip to content
  1. Examples

Scrollable page

This example shows how to use the options.mouse.disableWheelUntilMouseDown to prevent Ogma from capturing mouse scroll events when ogma does not have the focus.

ts
import Ogma from '@linkurious/ogma';

const ogma = new Ogma({
  container: 'graph-container',
  options: {
    mouse: {
      disableWheelUntilMouseDown: true
    }
  }
});

const graph = await ogma.generate.random({ nodes: 15, edges: 20 });
await ogma.setGraph(graph);
await ogma.view.locateGraph();
html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />

    <link type="text/css" rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div id="graph-container"></div>
    <script type="module" src="index.ts"></script>
  </body>
</html>
css
#graph-container {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  margin: 0;
  overflow: hidden;
}