Recommand · May 22, 2021 0

Can't Create Custom Scrollbar For CodeMirror

  • I’m trying to change the CodeMirror scroll bar style to be compatible with the code theme by SimpleScrollbar it’s the link SimpleScrollbar – i used SimpleScrollbar many times before and it’s works fine but when i tried it with CodeMirror it’s not working i tried it for .CodeMirror-vscrollbar and .CodeMirror-hscrollbar with no luck i even tried to change the style of .CodeMirror-vscrollbar, .CodeMirror-hscrollbar div but it’s not working too . Is there’s anyone can help me ?

Here’s my code

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">

  <!--      W3.CSS      -->
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

  <!--      SimpleScrollbar      -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-scrollbar@latest/simple-scrollbar.css">
  <script src="https://cdn.jsdelivr.net/npm/simple-scrollbar@latest/simple-scrollbar.min.js"></script>
  
  <style type="text/css">
    .w3-code {
        white-space: pre-wrap;
        padding: 25px;
    }
    .ss-scroll {
        background: red;
    }
  </style>

   <!--     CodeMirror   -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/codemirror.min.js" integrity="sha512-ZTpbCvmiv7Zt4rK0ltotRJVRaSBKFQHQTrwfs6DoYlBYzO1MA6Oz2WguC+LkV8pGiHraYLEpo7Paa+hoVbCfKw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/codemirror.min.css" integrity="sha512-xIf9AdJauwKIVtrVRZ0i4nHP61Ogx9fSRAkCLecmE2dL/U8ioWpDvFCAy4dcfecN72HHB9+7FfQj3aiO68aaaw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

  <!--    CodeMirror Mode   -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/mode/javascript/javascript.min.js" integrity="sha512-cMW1RqDC6+KwVloyQoUjqgmM5B0QGZcpZEAHJsab2WrCBmuyqoojv6cQ8O7KtAYtPym2vCooftLPeGzf0klXyA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/mode/css/css.min.js" integrity="sha512-YeNG6eTv+q+p/vvx+E5u05IBRurTlv0jfQuvitZMD+oNe9TfrGw+z4MHHxhPlE3X3csemC5YXlzDLMSZrgb34A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/mode/xml/xml.min.js" integrity="sha512-XPih7uxiYsO+igRn/NA2A56REKF3igCp5t0W1yYhddwHsk70rN1bbbMzYkxrvjQ6uk+W3m+qExHIJlFzE6m5eg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.61.1/mode/htmlmixed/htmlmixed.min.js" integrity="sha512-IC+qg9ITjo2CLFOTQcO6fBbvisTeJmiT5D5FnXsCptqY8t7/UxWhOorn2X+GHkoD1FNkyfnMJujt5PcB7qutyA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

  <!--    CodeMirror Theme    -->
  <link rel="stylesheet" href="https://vulpine-engineer.000webhostapp.com/0X/upload/ayu-dark.css">
</head>
<body>

<div class="w3-display-container">
    <div class="con w3-code w3-black htmlHigh"></div>
</div>
 <script type="text/javascript">
    var code = document.getElementsByClassName('w3-code')[0];
    var myCodeMirror = CodeMirror(code, {
    lineNumbers: true,
    mode:  "htmlmixed",
    theme: "ayu-dark",
    value: "<p>Hello</p>"
    })
  setTimeout(function() {
     var verticalScrollBar = document.getElementsByClassName("CodeMirror-vscrollbar")[0];
      console.log(verticalScrollBar)
      SimpleScrollbar.initEl(verticalScrollBar);
  }, 1000)
</script>
</body>
</html>