How to use/add simplescrollbars?

[prodiphost]

I want to use simplescrollbars addon with react-codemirror. It save scrollbar space.

Like this https://codemirror.net/5/demo/simplescrollbars.html.

Thank you.

[jaywcjlove]

@prodiphost https://codesandbox.io/embed/react-codemirror-example-codemirror-6-https-github-com-uiwjs-react-codemirror-issues-535-l5c9w7?fontsize=14&hidenavigation=1&theme=dark

.cm-scroller::-webkit-scrollbar {
  width: 10px;
}

.cm-scroller::-webkit-scrollbar-track {
  background: red;
}

.cm-scroller::-webkit-scrollbar-thumb {
  background: yellow;
}

.cm-scroller::-webkit-scrollbar-thumb:hover {
  background: blue;
}

Or

import { EditorView } from "@codemirror/view";
const scrollbarThemeOption = EditorView.theme({
  "& .cm-scroller::-webkit-scrollbar": {
    width: "10px !important"
  },
  "& .cm-scroller::-webkit-scrollbar-track": {
    background: "#333"
  },
  "& .cm-scroller::-webkit-scrollbar-thumb": {
    background: "yellow"
  },
  "& .cm-scroller::-webkit-scrollbar-thumb:hover": {
    background: "blue"
  }
});

<CodeMirror
  value={code}
  height="200px"
  extensions={[scrollbarThemeOption]}
/>

[prodiphost]

@jaywcjlove Thanks, but it not working with Firefox. Please give me a way for all latest version browser.

[jaywcjlove]

@prodiphost https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color

[prodiphost]

@jaywcjlove Thank you. its good for me.

[iiian]

@jaywcjlove , is there a reason why this cannot work with height='auto' ?

If I want my editor to span the height of the screen, it seems like scrollbars quit being accessible functionally.

To demo this, I simply set the first 's height={'auto'}, and suddenly the up/down scroll bar disappeared. Am I doing something wrong?

[iiian]

Hack: I can just set height to be 95% of window.innerHeight... But, ew.