Skip to content

Commit bd02d86

Browse files
bennadelbennadel
committed
Add css overflow demo.
1 parent 5d5b418 commit bd02d86

File tree

2 files changed

+92
-0
lines changed

2 files changed

+92
-0
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ with.
1010

1111
## My JavaScript Demos - I Love JavaScript!
1212

13+
* [Use CSS Overflow "Auto" - Not Overflow "Scroll" - When Clipping Most Fixed-Size Containers](https://bennadel.github.io/JavaScript-Demos/demos/css-overflow-auto/)
1314
* [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/)
1415
* [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/)
1516
* [Giving (click) Anchor Links Tab-Access Using A Directive In Angular 7.2.15](https://bennadel.github.io/JavaScript-Demos/demos/tabbable-anchor-angular7/)

‎demos/css-overflow-auto/index.htm

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
6+
<title>
7+
Use CSS Overflow "Auto" - Not Overflow "Scroll" - When Clipping Most Fixed-Size Containers
8+
</title>
9+
</head>
10+
<body>
11+
12+
<h1>
13+
Use CSS Overflow "Auto" - Not Overflow "Scroll" - When Clipping Most Fixed-Size Containers
14+
</h1>
15+
16+
<h2>
17+
Using <code>Overflow: Scroll</code>
18+
</h2>
19+
20+
<div class="demo">
21+
<div class="box" style="overflow: scroll ;">
22+
<p class="short-content">
23+
<!-- Content will go here.... -->
24+
</p>
25+
</div>
26+
<div class="box" style="overflow: scroll ;">
27+
<p class="long-content">
28+
<!-- Content will go here.... -->
29+
</p>
30+
</div>
31+
</div>
32+
33+
<h2>
34+
Using <code>Overflow: Auto</code>
35+
</h2>
36+
37+
<div class="demo">
38+
<div class="box" style="overflow: auto ;">
39+
<p class="short-content">
40+
<!-- Content will go here.... -->
41+
</p>
42+
</div>
43+
<div class="box" style="overflow: auto ;">
44+
<p class="long-content">
45+
<!-- Content will go here.... -->
46+
</p>
47+
</div>
48+
</div>
49+
50+
<style type="text/css">
51+
52+
.demo {
53+
display: flex ;
54+
}
55+
56+
.box {
57+
border: 2px solid #cccccc ;
58+
height: 125px ;
59+
margin-right: 15px ;
60+
width: 250px ;
61+
}
62+
63+
.short-content,
64+
.long-content {
65+
margin: 0px 0px 0px 0px ;
66+
padding: 10px 10px 10px 10px ;
67+
}
68+
69+
.short-content::before,
70+
.short-content::after,
71+
.long-content::before,
72+
.long-content::after {
73+
display: block ;
74+
font-size: 18px ;
75+
line-height: 25px ;
76+
}
77+
78+
.short-content::before,
79+
.short-content::after {
80+
content: "This is short content." ;
81+
}
82+
83+
.long-content::before,
84+
.long-content::after {
85+
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." ;
86+
}
87+
88+
</style>
89+
90+
</body>
91+
</html>

0 commit comments

Comments
 (0)