How to show a scrollbar when there's an overflow?

[anitaleung]

Currently I only see an option to enable word wrap, but I want a scrollbar to automatically show if the editor is horizontally scrollable. How can we do this?

[jaywcjlove]

@anitaleung I do not understand what you mean

[anitaleung]

For example, in this screencast the scrollbar is only shown when the user actively scrolls horizontally, and then disappears when the user stops scrolling. However sometimes it's not always apparent that there's more code that can be scrolled into view. Is there a way to always show a scrollbar when there's a horizontal overflow in the code editor?

https://user-images.githubusercontent.com/3052871/227698616-5e588784-deb3-4e6e-af05-f6d9f7136694.mov

[jaywcjlove]

@anitaleung Example: https://codesandbox.io/embed/react-codemirror-example-codemirror-6-forked-ptx2xw?fontsize=14&hidenavigation=1&theme=dark

import React from "react";
import CodeMirror from "@uiw/react-codemirror";
import { javascript } from "@codemirror/lang-javascript";
import { EditorView } from "@codemirror/view";

const scrollStyle = EditorView.theme({
  ".cm-scroller": {
    overflowX: "scroll"
  },
  ".cm-scroller::-webkit-scrollbar": {
    background: "transparent",
    width: "8px",
    height: "8px"
  },
  ".cm-scroller::-webkit-scrollbar-thumb": {
    background: "red",
    borderRadius: "10px"
    // webkitAppearance: 'none'
  }
});

export default function App() {
  const onChange = React.useCallback((value, viewUpdate) => {
    console.log("value:", value);
  }, []);
  return (
    <div>
      <CodeMirror
        value="console.log('hello world!');console.log('hello world!');console.log('hello world!');console.log('hello world!');console.log('hello world!');console.log('hello world!');console.log('hello world!');console.log('hello world!');console.log('hello world!');console.log('hello world!');console.log('hello world!');"
        height="200px"
        theme="dark"
        extensions={[javascript({ jsx: true }), scrollStyle]}
        onChange={onChange}
      />
    </div>
  );
}

[anitaleung]

Perfect, thank you!