bracketryjs

Visualize a knockout tournament in the browser

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

createBracket(data, wrapper, options)

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

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

"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.

Buttons AND mousewheel together. But ONLY buttons and mousewheel and NOT OTHER native ways of scrolling like keyboard keys or touchmove. Therefore in "mixed" scroll mode on MOBILE devices you get only one way of scrolling the matches (clicking the buttons).

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

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