Change:
<!-- Do Not Delete This! featurerequesttemplate --<!-- Please read our Rules of Conduct: --<!-- Please search existing issues to avoid creating duplicates. --<!-- Describe the feature you'd like. --Hello So I have noticed when using Sticky Scroll, any line which is too long (for example the screenshot below), it would block off the rest of the code. A feature I was thinking would be a good adition is sideways scrolling (like what happens already in the main editor) so that people can see what else is in that line. <kbd<img src="https://user-"/</kbd

Discussion:
} .monaco-editor .sticky-line-root { <del> background-color: inherit; overflow: hidden; </del> <ins> background-color: var(--vscode-editorStickyScroll-background); </ins> white-space: nowrap; width: 100%; }

cursor: pointer; } <del> .monaco-editor .sticky-widget { </del> <ins> .monaco-editor .sticky-widget-root { width: 100%; position: relative; } .monaco-editor .sticky-widget-scroll { </ins> width: 100%; box-shadow: var(--vscode-scrollbar-shadow) 0 3px 2px -2px; z-index: 4; background-color: var(--vscode-editorStickyScroll-background); } <del> .monaco-editor .sticky-widget.peek { </del> <ins> .monaco-editor .sticky-widget-scroll.peek { </ins> background-color: var(--vscode-peekViewEditorStickyScroll-background); }

import * as dom from 'vs/base/browser/dom'; import { StandardMouseEvent } from 'vs/base/browser/mouseEvent'; import { createTrustedTypesPolicy } from 'vs/base/browser/trustedTypes'; <ins> import { DomScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElement'; </ins> import { Disposable, DisposableStore } from 'vs/base/common/lifecycle'; <ins> import { ScrollbarVisibility } from 'vs/base/common/scrollable'; </ins> import 'vs/css!./stickyScroll'; import { ICodeEditor, IOverlayWidget, IOverlayWidgetPosition } from 'vs/editor/browser/editorBrowser'; import { EmbeddedCodeEditorWidget } from 'vs/editor/browser/widget/embeddedCodeEditorWidget';

export class StickyScrollWidget extends Disposable implements IOverlayWidget { private readonly _layoutInfo: EditorLayoutInfo; <ins> private readonly _scrollbar: DomScrollableElement; private readonly _scrollableDomNode: HTMLElement = document.createElement('div'); </ins> private readonly _rootDomNode: HTMLElement = document.createElement('div'); private readonly _disposableStore = this._register(new DisposableStore());

super(); this._layoutInfo = this._editor.getLayoutInfo(); this._rootDomNode = document.createElement('div'); <del> this._rootDomNode.className = 'sticky-widget'; </del> this._rootDomNode.classList.toggle('peek', _editor instanceof EmbeddedCodeEditorWidget); this._rootDomNode.style.width = `${this._layoutInfo.width - this._layoutInfo.minimap.minimapCanvasOuterWidth - this._layoutInfo.verticalScrollbarWidth}px`; <ins> this._rootDomNode.className = 'sticky-widget-root'; this._scrollbar = this._register(new DomScrollableElement(this._rootDomNode, { consumeMouseWheelIfScrollbarIsNeeded: true, vertical: ScrollbarVisibility.Hidden, handleMouseWheel: false })); this._scrollableDomNode.appendChild(this._scrollbar.getDomNode()); this._scrollableDomNode.className = 'sticky-widget-scroll'; this._register(dom.addDisposableListener(this._scrollbar.getDomNode(), dom.EventType.MOUSE_OVER, () => { this._scrollbar.scanDomNode(); })); this._register(this._editor.onDidLayoutChange(() => { this._scrollbar.scanDomNode(); })); this._scrollbar.scanDomNode(); </ins> } get hoverOnLine(): number {

child.style.lineHeight = `${lineHeight}px`; child.style.width = `${width}px`; child.style.height = `${lineHeight}px`; <del> child.style.zIndex = '0'; </del> <ins> child.style.position = 'absolute'; </ins> // Special case for the last line of sticky scroll if (index === this._lineNumbers.length - 1) { <del> child.style.position = 'relative'; child.style.zIndex = '-1'; child.style.top = this._lastLineRelativePosition + 'px'; </del> <ins> child.style.zIndex = '0'; child.style.top = index * lineHeight + this._lastLineRelativePosition + 'px'; } else { child.style.zIndex = '1'; child.style.top = `${index * lineHeight}px`; </ins> } // Each child has a listener which fires when the mouse hovers over the child

} getDomNode(): HTMLElement { <del> return this._rootDomNode; </del> <ins> return this._scrollableDomNode; </ins> } getPosition(): IOverlayWidgetPosition | null {