Add css overflow demo.

bennadel · Jun 23, 2019 · bd02d86 · bd02d86
1 parent 5d5b418
commit bd02d86
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -10,6 +10,7 @@ with.
 
 ## My JavaScript Demos - I Love JavaScript!
 
+* [Use CSS Overflow "Auto" - Not Overflow "Scroll" - When Clipping Most Fixed-Size Containers](https://bennadel.github.io/JavaScript-Demos/demos/css-overflow-auto/)
 * [Hello World With The CLI, AoT, Lazy Loading Routes, Differential Loading, And Ivy In Angular 8.1.0-beta.2](https://bennadel.github.io/JavaScript-Demos/demos/webpack4-angular8-cli/dist/)
 * [Accessibility And Styled Anchor Links vs. Styled Buttons In Angular 7.2.15](https://bennadel.github.io/JavaScript-Demos/demos/link-vs-button-accessibility-angular7/)
 * [Giving (click) Anchor Links Tab-Access Using A Directive In Angular 7.2.15](https://bennadel.github.io/JavaScript-Demos/demos/tabbable-anchor-angular7/)

diff --git a/demos/css-overflow-auto/index.htm b/demos/css-overflow-auto/index.htm
@@ -0,0 +1,91 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+
+		<title>
+			Use CSS Overflow "Auto" - Not Overflow "Scroll" - When Clipping Most Fixed-Size Containers
+		</title>
+	</head>
+	<body>
+
+		<h1>
+			Use CSS Overflow "Auto" - Not Overflow "Scroll" - When Clipping Most Fixed-Size Containers
+		</h1>
+
+		<h2>
+			Using <code>Overflow: Scroll</code>
+		</h2>
+
+		<div class="demo">
+			<div class="box" style="overflow: scroll ;">
+				<p class="short-content">
+					<!-- Content will go here.... -->
+				</p>
+			</div>
+			<div class="box" style="overflow: scroll ;">
+				<p class="long-content">
+					<!-- Content will go here.... -->
+				</p>
+			</div>
+		</div>
+
+		<h2>
+			Using <code>Overflow: Auto</code>
+		</h2>
+
+		<div class="demo">
+			<div class="box" style="overflow: auto ;">
+				<p class="short-content">
+					<!-- Content will go here.... -->
+				</p>
+			</div>
+			<div class="box" style="overflow: auto ;">
+				<p class="long-content">
+					<!-- Content will go here.... -->
+				</p>
+			</div>
+		</div>
+
+		<style type="text/css">
+
+			.demo {
+				display: flex ;
+			}
+
+			.box {
+				border: 2px solid #cccccc ;
+				height: 125px ;
+				margin-right: 15px ;
+				width: 250px ;
+			}
+
+			.short-content,
+			.long-content {
+				margin: 0px 0px 0px 0px ;
+				padding: 10px 10px 10px 10px ;
+			}
+
+			.short-content::before,
+			.short-content::after,
+			.long-content::before,
+			.long-content::after {
+				display: block ;
+				font-size: 18px ;
+				line-height: 25px ;
+			}
+
+			.short-content::before,
+			.short-content::after {
+				content: "This is short content." ;
+			}
+
+			.long-content::before,
+			.long-content::after {
+				content: "This is much longer content over here which will cause more scrolling than the short content, which should make the scrollbar behavior more apparent in the demo." ;
+			}
+
+		</style>
+
+	</body>
+</html>