add box shadow for scrolling

Author: amunger

extensions/notebook-renderers/src/index.ts

@@ -236,6 +236,15 @@ export const activate: ActivationFunction<void> = (ctx) => {
 		overflow-y: scroll;
 		max-height: 400px;
 	}
+	span.output-stream.more-above {
+		box-shadow: var(--vscode-scrollbar-shadow) 0 6px 6px -6px inset
+	}
+	span.output-stream.more-below {
+		box-shadow: var(--vscode-scrollbar-shadow) 0px -6px 6px -6px inset
+	}
+	span.output-stream.more-above.more-below {
+		box-shadow: var(--vscode-scrollbar-shadow) 0px -6px 6px -6px inset, var(--vscode-scrollbar-shadow) 0 6px 6px -6px inset
+	}
 	.output-plaintext .code-bold,
 	.output-stream .code-bold,
 	.traceback .code-bold {

extensions/notebook-renderers/src/textHelper.ts

@@ -52,6 +52,22 @@ export function truncatedArrayOfString(id: string, outputs: string[], linesLimit
 
 function scrollableArrayOfString(outputs: string[], container: HTMLElement) {
 	container.classList.add('scrollable');
+
+	container.onscroll = (e) => {
+		const target = e.target as HTMLElement;
+		if (target.scrollTop === 0) {
+			container.classList.remove('more-above');
+		} else {
+			container.classList.add('more-above');
+		}
+
+		if (target.scrollTop + target.clientHeight === target.scrollHeight) {
+			container.classList.remove('more-below');
+		} else {
+			container.classList.add('more-below');
+		}
+	};
+
 	const buffer = outputs.join('\n').split(/\r\n|\r|\n/g);
 	const spanElement = handleANSIOutput(buffer.slice(0, 5000).join('\n'));
 	container.appendChild(spanElement);