Building A Custom Scroll-bar for the Ace Editor.

[Abdulaziz Alaboudi]

  I am trying to have the Ace editor scrolls whenever I scroll another div. On other words, I want to have one scroll-bar for a custom div as well as the Ace editor.

Any suggestion, please!

Aziz     

[Harutyun Amirjanyan]

the code for scrollbar is at https://github.com/ajaxorg/ace/blob/v1.2.3/lib/ace/virtual_renderer.js#L761 and https://github.com/ajaxorg/ace/blob/v1.2.3/lib/ace/scrollbar.js#L159 

--
You received this message because you are subscribed to the Google Groups "Ajax.org Cloud9 Editor (Ace)" group.
To unsubscribe from this group and stop receiving emails from it, send an email to ace-discuss...@googlegroups.com.
To post to this group, send email to ace-d...@googlegroups.com.
Visit this group at https://groups.google.com/group/ace-discuss.
For more options, visit https://groups.google.com/d/optout.

[Abdulaziz Alaboudi]

Thank you Harutyun very much for your response! Could you please elaborate more on how I would use this code to implement a custom scroll-bar?

Thank you again!


Aziz

[Harutyun Amirjanyan]

this depends on details of what exactly you want to do.

Where is the custom div, what is in it. How do you make div and editor to have the same size.

[Abdulaziz Alaboudi]

 
Thank you Harutyun for your response!

The custom div is actually a gutter on the right side of the Ace editor. Inside the gutter, there are divs that represent lines in the Ace editor. Therefore, each time the user press enter and adds a new line to the Ace editor, the gutter dynamically adds a div to match that new line.

Now, I want to have one scroll-bar both for the gutter and the Ace editor.

At this moment, I have the following code


<div   id="gutter" onscroll="scrolled()" >



function scrolled(){
   
      jsEditor.getSession().setScrollTop( someValue );
     
}


 
I have also attached pictures of how the current gutter and Ace editor look like. Please have a look at them.


I really appropriate your help! Thank you very much again  

[Harutyun Amirjanyan]

you can either hide the editor.renderer.scrollbarV.element
and modify editor.renderer.scrollbarV.setScrollTop/setScrollHeight to work on your div
or change getWidth

editor.renderer.scrollBarV.getWidth = function() {return 200}; 

editor.resize(true)

and add divs to editor.renderer.scrollbarV.element instead