re-arrange dom structure

css/xterm.css

@@ -180,14 +180,9 @@
 }
 
 .xterm-decoration-scrollbar {
-    z-index: 7;
-    position: sticky;
+    z-index: 6;
+    position: absolute;
     top: 0px;
     right: 0px;
     width: 50px;
-} 
-
-.xterm-decoration-scrollbar.demo-scrollbar {
-  height: 436px;
-  z-index:10;
-} 
+} 

demo/client.ts

@@ -553,9 +553,8 @@ function addDecoration() {
 }
 
 function addScrollbarDecoration() {
-  document.querySelector('.xterm-decoration-scrollbar')?.classList.add('demo-scrollbar');
   const scrollbarDecorationCanvas = term.registerDecoration({marker: term.addMarker(1), scrollbarDecorationColor: 'red'});
-  scrollbarDecorationCanvas.element!.style.left = `${scrollbarDecorationCanvas.element!.nextElementSibling!.clientWidth + 89}px`;
+  scrollbarDecorationCanvas.element!.style.left = `${document.querySelector('.xterm-viewport').clientWidth + 5}px`;
   term.registerDecoration({marker: term.addMarker(3), scrollbarDecorationColor: 'green'});
   term.registerDecoration({marker: term.addMarker(5), scrollbarDecorationColor: 'blue'});
 } 

src/browser/Terminal.ts

@@ -70,7 +70,6 @@ export class Terminal extends CoreTerminal implements ITerminal {
   private _viewportElement: HTMLElement | undefined;
   private _helperContainer: HTMLElement | undefined;
   private _compositionView: HTMLElement | undefined;
-  private _scrollbarDecorationNode: HTMLCanvasElement | undefined;
 
   // private _visualBellTimer: number;
 
@@ -473,11 +472,6 @@ export class Terminal extends CoreTerminal implements ITerminal {
     this._viewportElement.classList.add('xterm-viewport');
     fragment.appendChild(this._viewportElement);
 
-    // TODO: make this opt in, must be done before the scroll area in order to show up
-    this._scrollbarDecorationNode = document.createElement('canvas');
-    this._scrollbarDecorationNode.classList.add('xterm-decoration-scrollbar');
-    this._viewportElement?.appendChild(this._scrollbarDecorationNode);
-
     this._viewportScrollArea = document.createElement('div');
     this._viewportScrollArea.classList.add('xterm-scroll-area');
     this._viewportElement.appendChild(this._viewportScrollArea);
@@ -584,7 +578,7 @@ export class Terminal extends CoreTerminal implements ITerminal {
     this.linkifier.attachToDom(this.element, this._mouseZoneManager);
     this.linkifier2.attachToDom(this.screenElement, this._mouseService, this._renderService);
 
-    this.decorationService.attachToDom(this._renderService, this.screenElement, this._viewportElement, this._scrollbarDecorationNode);
+    this.decorationService.attachToDom(this._renderService, this.screenElement, this._viewportElement);
     // This event listener must be registered aftre MouseZoneManager is created
     this.register(addDisposableDomListener(this.element, 'mousedown', (e: MouseEvent) => this._selectionService!.onMouseDown(e)));
 

src/browser/services/DecorationService.ts

@@ -30,11 +30,10 @@ export class DecorationService extends Disposable implements IDecorationService
 
   constructor(@IInstantiationService private readonly _instantiationService: IInstantiationService, @IBufferService private readonly _bufferService: IBufferService) { super(); }
 
-  public attachToDom(renderService: IRenderService, screenElement: HTMLElement, viewportElement: HTMLElement, scrollbarDecorationNode: HTMLCanvasElement): void {
+  public attachToDom(renderService: IRenderService, screenElement: HTMLElement, viewportElement: HTMLElement): void {
     this._renderService = renderService;
     this._screenElement = screenElement;
     this._viewportElement = viewportElement;
-    this._scrollbarDecorationNode = scrollbarDecorationNode;
 
     this.register(this._renderService.onRenderedBufferChange(() => this._refresh()));
     this.register(this._renderService.onDimensionsChange(() => this._refresh(true)));
@@ -97,9 +96,15 @@ export class DecorationService extends Disposable implements IDecorationService
   }
 
   private _registerScrollbarDecoration(marker: IMarker, color: string): IDecoration | undefined {
-    if (!this._scrollbarDecorationNode || !this._viewportElement) {
+    if (!this._viewportElement?.parentElement) {
       return;
     }
+    if (!this._scrollbarDecorationNode) {
+      // TODO: make this opt in, must be done before the scroll area in order to show up
+      this._scrollbarDecorationNode = document.createElement('canvas');
+      this._scrollbarDecorationNode.classList.add('xterm-decoration-scrollbar');
+      this._viewportElement.parentElement.appendChild(this._scrollbarDecorationNode);
+    }
     if (!this._scrollbarDecorationCanvas) {
       this._scrollbarDecorationCanvas = this._scrollbarDecorationNode.getContext('2d');
       this._refreshScollbarDecorations();

src/browser/services/Services.ts

@@ -119,6 +119,6 @@ export interface ICharacterJoinerService {
 
 export const IDecorationService = createDecorator<IDecorationService>('DecorationService');
 export interface IDecorationService extends IDisposable {
-  attachToDom(renderService: IRenderService, screenElement: HTMLElement, viewportElement: HTMLElement, scrollbarDecorationNode: HTMLCanvasElement): void;
+  attachToDom(renderService: IRenderService, screenElement: HTMLElement, viewportElement: HTMLElement): void;
   registerDecoration(decorationOptions: IDecorationOptions): IDecoration | undefined;
 }