Visualize a knockout tournament in the browser

Vertical scroll modes

import { createBracket } from 'bracketry'
...
const options = {
    verticalScrollMode: 'buttons'
}

createBracket(data, wrapper, options)

verticalScrollMode option allows you to choose between 3 ways of vertical scrolling:

a) "native" (default)

Matches are scrolled in a "native browser way" which can be mousewheel / keys / touchmove or whatever

b) "buttons"

"Up" and "down" buttons appear above and below the matches. Clicking these buttons will scroll the content by a number of pixels defined by buttonScrollAmount option. Buttons will be positioned according to scrollButtonsPosition.

c) "mixed"

Buttons and mousewheel together. Note that this doesn't include touchmove event. Therefore "mixed" mode on mobile devices will mean buttons only.

Buttons are flexible

There are several options to adjust buttons' position, size etc.

verticalScrollMode is not updatable

This option can only be set on initialization of bracketry. It will be ignored when passed to applyNewOptions method.