bracketryjs

Visualize a knockout tournament in the browser

How to adjust scroll buttons

(scroll buttons will be rendered only when verticalScrollMode option is set to "buttons" or "mixed")

Actually scroll buttons aren't extremely flexible. They are always located above and below the matches area. Though you can choose whether these buttons will "eat" the vertical space, making the matches area shorter, or "float" above the matches area.

...
const options = {
    verticalScrollMode: "buttons",
    scrollButtonsPosition: "overMatches" // or "gutters" which is default
}
createBracket(data, wrapper, options)

scrollButtonsPosition option allows you to choose between 2 positions:

Default one. Buttons take the full width of the matches area. Height of the matches area is reduced by the buttons' height. You can adjust the border-color of the gutters using scrollGutterBorderColor option

Clickable area of a button is "floating" over the matches area. Clickable area of a button is not expanded to the full width but limited to the small space around the icon.
(Though you can inject a full-width "floating" buttons using scrollUpButtonHTML and scrollDownButtonHTML options) Height of the matches area is NOT reduced by the buttons' height.

Icons

Use scrollUpButtonHTML and scrollDownButtonHTML options to get whatever you like instead of default scroll buttons. Note that this HTML must be wrapped in a tag. For example let's replace the default arrows with emoji and add a full-width gradient background to it (hopefully it will make buttons more distinct from the underlying matches):

...
const options = {
    verticalScrollMode: "buttons",
    scrollButtonsPosition: "gutters",
    scrollUpButtonHTML: `SUBHTML
    `,
    scrollDownButtonHTML: `SDBHTML
    `
}
createBracket(data, wrapper, options)

Or just change the color and size of the default scroll buttons by setting scrollButtonArrowSize and scrollButtonSvgColor options. You can also add (or reduce) some space around an icon by setting scrollButtonPadding.