Implemented smooth scrolling.

demo/client.ts

@@ -353,6 +353,8 @@ function initOptions(term: TerminalType): void {
       } else if (o === 'scrollSensitivity') {
         term.options.scrollSensitivity = parseFloat(input.value);
         updateTerminalSize();
+      } else if (o === 'smoothScrollingSpeed') {
+        term.options.smoothScrollingSpeed = parseFloat(input.value);
       } else if(o === 'scrollback') {
         term.options.scrollback = parseInt(input.value);
         setTimeout(() => updateTerminalSize(), 5);

src/browser/Viewport.ts

@@ -29,6 +29,9 @@ export class Viewport extends Disposable implements IViewport {
   private _lastHadScrollBar: boolean = false;
   private _activeBuffer: IBuffer;
   private _renderDimensions: IRenderDimensions;
+  private _remainingLinesToScroll: number = 0;
+  private _lastSmoothScrollStepTime: number = Date.now();
+  private _smoothScrollTimeout?: NodeJS.Timeout;
 
   // Stores a partial line amount when scrolling, this is used to keep track of how much of a line
   // is scrolled so we can "scroll" over partial lines and feel natural on touchpads. This is a
@@ -186,6 +189,30 @@ export class Viewport extends Disposable implements IViewport {
     this._scrollLines(diff);
   }
 
+  /**
+   * Performs single step of the smooth scrolling.
+   */
+  private _performSmoothScrollStep(): void {
+    // Calculate and update time
+    const now = Date.now();
+    const deltaSeconds = (now - this._lastSmoothScrollStepTime) / 1000;
+    this._lastSmoothScrollStepTime = now;
+
+    const maxStepAbs = Math.abs(this._remainingLinesToScroll);
+
+    if (maxStepAbs > 0) {
+      const stepAbs = Math.max(1, Math.min(maxStepAbs, Math.floor(maxStepAbs * this._optionsService.rawOptions.smoothScrollingSpeed * deltaSeconds)));
+      const step = (this._remainingLinesToScroll > 0 ? 1 : -1) * stepAbs;
+      this._viewportElement.scrollTop += step;
+      this._remainingLinesToScroll -= step;
+    }
+
+    if (this._remainingLinesToScroll === 0 && this._smoothScrollTimeout) {
+      clearInterval(this._smoothScrollTimeout);
+      this._smoothScrollTimeout = undefined;
+    }
+  }
+
   /**
    * Handles bubbling of scroll event in case the viewport has reached top or bottom
    * @param ev The scroll event.
@@ -214,7 +241,21 @@ export class Viewport extends Disposable implements IViewport {
     if (amount === 0) {
       return false;
     }
-    this._viewportElement.scrollTop += amount;
+
+    if (!this._optionsService.rawOptions.smoothScrolling) {
+      this._viewportElement.scrollTop += amount;
+    } else {
+      // Check whether user wants to scroll the other way (different signs)
+      if (amount * this._remainingLinesToScroll < 0) {
+        this._remainingLinesToScroll = amount;
+      } else {
+        this._remainingLinesToScroll += amount;
+      }
+      if (this._remainingLinesToScroll !== 0 && !this._smoothScrollTimeout) {
+        this._lastSmoothScrollStepTime = Date.now();
+        this._smoothScrollTimeout = setInterval(() => this._performSmoothScrollStep(), this._optionsService.rawOptions.smoothScrollingStepInterval);
+      }
+    }
     return this._bubbleScroll(ev, amount);
   }
 

src/common/services/OptionsService.ts

@@ -35,6 +35,9 @@ export const DEFAULT_OPTIONS: Readonly<ITerminalOptions> = {
   logLevel: 'info',
   scrollback: 1000,
   scrollSensitivity: 1,
+  smoothScrolling: false,
+  smoothScrollingSpeed: 10,
+  smoothScrollingStepInterval: 20,
   screenReaderMode: false,
   macOptionIsMeta: false,
   macOptionClickForcesSelection: false,
@@ -156,11 +159,17 @@ export class OptionsService implements IOptionsService {
           throw new Error(`${key} cannot be less than 0, value: ${value}`);
         }
         break;
+      case 'smoothScrollingSpeed':
       case 'fastScrollSensitivity':
       case 'scrollSensitivity':
         if (value <= 0) {
           throw new Error(`${key} cannot be less than or equal to 0, value: ${value}`);
         }
+      case 'smoothScrollingStepInterval':
+        value = Math.floor(value);
+        if (value < 1 || value > 250) {
+          throw new Error(`${key} has to be between 1 and 250, value: ${value}`);
+        }
       case 'rows':
       case 'cols':
         if (!value && value !== 0) {

src/common/services/Services.ts

@@ -240,6 +240,9 @@ export interface ITerminalOptions {
   screenReaderMode: boolean;
   scrollback: number;
   scrollSensitivity: number;
+  smoothScrolling: boolean;
+  smoothScrollingSpeed: number;
+  smoothScrollingStepInterval: number;
   tabStopWidth: number;
   theme: ITheme;
   windowsMode: boolean;

typings/xterm-headless.d.ts

@@ -186,6 +186,26 @@ declare module 'xterm-headless' {
      */
     scrollSensitivity?: number;
 
+    /**
+     * Whether to use smooth scrolling.
+     */
+    smoothScrolling?: boolean;
+
+    /**
+     * The speed of the in-terminal position adjustment.
+     * Speed is then multiplied by the amount of lines user
+     * wants to scroll. Fast scrolling speeds up the position adjustment.
+     * Takes no effect when `smoothScrolling` is set to `false`.
+     */
+    smoothScrollingSpeed?: number;
+
+    /**
+     * The interval in milliseconds that will determine how often
+     * the smooth scrolling should update the in-terminal position.
+     * Takes no effect when `smoothScrolling` is set `false`.
+     */
+    smoothScrollingStepInterval?: number;
+
     /**
      * The size of tab stops in the terminal.
      */

typings/xterm.d.ts

@@ -233,6 +233,26 @@ declare module 'xterm' {
      */
     scrollSensitivity?: number;
 
+    /**
+     * Whether to use smooth scrolling.
+     */
+    smoothScrolling?: boolean;
+
+    /**
+     * The speed of the in-terminal position adjustment.
+     * Speed is then multiplied by the amount of lines user
+     * wants to scroll. Fast scrolling speeds up the position adjustment.
+     * Takes no effect when `smoothScrolling` is set to `false`.
+     */
+    smoothScrollingSpeed?: number;
+
+    /**
+     * The interval in milliseconds that will determine how often
+     * the smooth scrolling should update the in-terminal position.
+     * Takes no effect when `smoothScrolling` is set `false`.
+     */
+    smoothScrollingStepInterval?: number;
+
     /**
      * The size of tab stops in the terminal.
      */