How to add scrollbar?

[mustafaakin]

How can I add a scroll bar? Currently when I scroll it with mouse wheel it is okay, but I think it changes the dom to do so by having the exact number of divs as height, and modifying its content on mousewheel.

There is Terminal.prototype.bindMouse = function() { , by looking its context all I see it sends some characters but I am not sure. Any thoughts on this? I can at least bind two buttons, one up and down for emulating that mouse movement one by one.

[andyliuliming]

the scroll can be done by ctrl+arrow up arrow down, or just use your middle scroll mouse to scroll.
BTW, in IE the mouse scroll is not working.

[jakirkham]

Also, would really love to see a scrollbar. Is this feasible?

[jakirkham]

Part of why a scrollbar would be nice is scrolling in other ways is really sensitive. So, I will skip past the interesting section. Plus, the other reasons scrollbars are nice.

[soichih]

+1

I can probably implement the scrollbar feature (using this.ydisp & this.ybase as scroll bar position / height etc..?) but the author of this project doesn't seem to be accepting pull-request.. Maybe I should work on jeremyramin/term.js branch instead?

[aurium]

I did it using jQueryUI.

  <div id="terminal-outbox">
    <div class="terminal-container">Loading Terminal...</div>
  </div>
  <div id="scroller"></div>

The CSS put the #scroller absolute placed at right:0, top:0 and bottom:0

...
        var div = $('.terminal-container').empty()[0];
        term.open(div);

        var scroller = $('#scroller').slider({
          orientation: 'vertical',
          value: -term.ydisp,
          min: -term.ybase,
          max: 0,
          step: 1,
          slide: function(event, ui) {
            console.log(term.ybase, ui.value, term.ydisp);
            term.scrollDisp(-ui.value - term.ydisp);
          }
        });

        function updateScroller() {
          scroller.slider('option', 'min', -term.ybase);
          scroller.slider('option', 'value', -term.ydisp);
        }

...
        socket.on('data', function(data) {
          if (data.termData != null) {
            term.write(data.termData);
            updateTitle();
            updateScroller();
          }
        });
...

Simple as piece of cake. :-)

[soichih]

Is there a way to do something similar using just the native browser scrollbar? Maybe by overlaying another transparent div on top of the term window?

[aurium]

Sure @soichih! I like the themeable jQuery scroll, but i would like to see a native scrollbar approach.

[briceburg]

I believe this is implemented in the butterfly project -- https://github.com/paradoxxxzero/butterfly/blob/master/coffees/term.coffee

[jakirkham]

I think some of the users of this project appreciate the permissive licensing of this project. So, it is doubtful they will want to switch to a GPL'd project.

[soichih]

Did anyone manage to implement HTML5 only scrollbar for this? I can't think of a way to display just the scrollbar without creating a narrow div (with scroll: auto) next to the term.

[mei-rune]

This project is no longer maintained ⚠️. For a maintained fork take a look at https://github.com/sourcelair/xterm.js

[soichih]

I tried to switch to xterm.js, but it doesn't seem to support terminal colors. All text is displayed in black & white. Also, xterm.js doesn't seem to support scrollbar..

xterm.js does support colors. I just had to add TERM=xterm-256color to the ENV.