11<!DOCTYPE html>
2- < meta charset ="utf-8 ">
3- < meta name ="viewport " content ="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no ">
2+ < meta charset ="utf-8 " />
3+ < meta
4+ name ="viewport "
5+ content ="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no "
6+ />
47< script src ="../umd/compute-scroll-into-view.min.js "> </ script >
58< script src ="./utils.js "> </ script >
69< style >
7- html , body {
10+ html ,
11+ body {
812 margin : 0 ;
913 padding : 0 ;
1014 height : 100vh ;
1418 padding : 0 100vw ;
1519 }
1620
17- .outer-scroll-container ,
18- .inner-scroll-container {
19- overflow : scroll;
20- -webkit-box-shadow : 0 0 0 1px hsla (0 , 0% , 0% , .1 );
21- box-shadow : 0 0 0 1px hsla (0 , 0% , 0% , .1 );
22- }
23- .outer-scroll-container {
24- background : # f5f5fb ;
25- margin : 200vh auto;
26- }
27- .outer-scroll-container ,
28- .inner-scroll-element {
29- height : 400px ;
30- width : 400px ;
31- }
32- .inner-scroll-container {
33- height : 200px ;
34- width : 200px ;
35- }
21+ .outer-scroll-container ,
22+ .inner-scroll-container {
23+ overflow : scroll;
24+ -webkit-box-shadow : 0 0 0 1px hsla (0 , 0% , 0% , 0 .1 );
25+ box-shadow : 0 0 0 1px hsla (0 , 0% , 0% , 0 .1 );
26+ }
27+ .outer-scroll-container {
28+ background : # f5f5fb ;
29+ margin : 200vh auto;
30+ }
31+ .outer-scroll-container ,
32+ .inner-scroll-element {
33+ height : 400px ;
34+ width : 400px ;
35+ }
36+ .inner-scroll-container {
37+ height : 200px ;
38+ width : 200px ;
39+ }
3640
37- .outer-scroll-element ,
38- .inner-scroll-element {
39- display : -webkit-box;
40- display : -ms-flexbox;
41- display : flex;
42- -webkit-box-align : center;
43- -ms-flex-align : center;
44- align-items : center;
45- -webkit-box-pack : center;
46- -ms-flex-pack : center;
47- justify-content : center;
48- }
41+ .outer-scroll-element ,
42+ .inner-scroll-element {
43+ display : -webkit-box;
44+ display : -ms-flexbox;
45+ display : flex;
46+ -webkit-box-align : center;
47+ -ms-flex-align : center;
48+ align-items : center;
49+ -webkit-box-pack : center;
50+ -ms-flex-pack : center;
51+ justify-content : center;
52+ }
4953
50- .outer-scroll-element {
51- height : 800px ;
52- width : 800px ;
53- }
54+ .outer-scroll-element {
55+ height : 800px ;
56+ width : 800px ;
57+ }
5458
55- .inner-scroll-element {
56- background : hsla (0 , 0% , 0% , .05 );
57- }
59+ .inner-scroll-element {
60+ background : hsla (0 , 0% , 0% , 0 .05 );
61+ }
5862
59- .scroll-padding {
60- display : -webkit-box;
61- display : -ms-flexbox;
62- display : flex;
63- -ms-flex-wrap : wrap;
64- flex-wrap : wrap;
65- padding : 16.666666666666668px ;
66- height : 333.3333333333333px ;
67- width : 333.3333333333333px ;
68- }
63+ .scroll-padding {
64+ display : -webkit-box;
65+ display : -ms-flexbox;
66+ display : flex;
67+ -ms-flex-wrap : wrap;
68+ flex-wrap : wrap;
69+ padding : 16.666666666666668px ;
70+ height : 333.3333333333333px ;
71+ width : 333.3333333333333px ;
72+ }
6973
70- .layer {
71- display : -webkit-box;
72- display : -ms-flexbox;
73- display : flex;
74- -webkit-box-pack : center;
75- -ms-flex-pack : center;
76- justify-content : center;
77- -webkit-box-align : center;
78- -ms-flex-align : center;
79- align-items : center;
80- height : 33.333333333333336% ;
81- -webkit-box-flex : 0 ;
82- -ms-flex : none;
83- flex : none;
84- width : 33.3333% ;
85- }
86- .scroll-tile {
87- font-size : 48px !important ;
88- font-size : 3rem !important ;
89- display : -webkit-box;
90- display : -ms-flexbox;
91- display : flex;
92- -webkit-box-align : center;
93- -ms-flex-align : center;
94- align-items : center;
95- border-radius : 4px ;
96- height : 66.66666666666667px ;
97- color : hsla (0 , 0% , 0% , .3 );
98- background-color : # 00d1b2 ;
99- -webkit-box-pack : center;
100- -ms-flex-pack : center;
101- justify-content : center;
102- width : 66.66666666666667px ;
103- }
74+ .layer {
75+ display : -webkit-box;
76+ display : -ms-flexbox;
77+ display : flex;
78+ -webkit-box-pack : center;
79+ -ms-flex-pack : center;
80+ justify-content : center;
81+ -webkit-box-align : center;
82+ -ms-flex-align : center;
83+ align-items : center;
84+ height : 33.333333333333336% ;
85+ -webkit-box-flex : 0 ;
86+ -ms-flex : none;
87+ flex : none;
88+ width : 33.3333% ;
89+ }
90+ .scroll-tile {
91+ font-size : 48px !important ;
92+ font-size : 3rem !important ;
93+ display : -webkit-box;
94+ display : -ms-flexbox;
95+ display : flex;
96+ -webkit-box-align : center;
97+ -ms-flex-align : center;
98+ align-items : center;
99+ border-radius : 4px ;
100+ height : 66.66666666666667px ;
101+ color : hsla (0 , 0% , 0% , 0 .3 );
102+ background-color : # 00d1b2 ;
103+ -webkit-box-pack : center;
104+ -ms-flex-pack : center;
105+ justify-content : center;
106+ width : 66.66666666666667px ;
107+ }
104108</ style >
105109< div class ="outer-scroll-container ">
106110 < div class ="outer-scroll-element ">
138142 </ div >
139143 </ div >
140144 </ div >
141- </ div >
145+ </ div >
0 commit comments