forked from appleple/scroll-hint
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
105 lines (97 loc) · 3.63 KB
/
Copy pathindex.html
File metadata and controls
105 lines (97 loc) · 3.63 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ScrollHint</title>
<link rel="stylesheet" href="../css/scroll-hint.css">
<style>
/* .table-wrap {
width: 300px;
} */
.table {
width: 100%;
max-width: 100%;
margin-bottom: 1rem;
border-collapse: collapse;
background-color: transparent;
}
.table td,.table th {
white-space: nowrap;
padding: .75rem;
vertical-align: top;
border-top: 1px solid #4d4a40;
/* background-color: #FFF; */
}
.table thead th {
vertical-align: bottom;
border-bottom: 2px solid #4d4a40;
}
.table tbody+tbody {
border-top: 2px solid #4d4a40;
}
</style>
</head>
<body>
<div class="table-wrap">
<h1>Test</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloremque corrupti exercitationem eos. Ducimus, sequi! Magnam, quidem veniam sit placeat voluptatum, error blanditiis amet tenetur odit omnis optio aliquid. Quisquam, numquam?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloremque corrupti exercitationem eos. Ducimus, sequi! Magnam, quidem veniam sit placeat voluptatum, error blanditiis amet tenetur odit omnis optio aliquid. Quisquam, numquam?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloremque corrupti exercitationem eos. Ducimus, sequi! Magnam, quidem veniam sit placeat voluptatum, error blanditiis amet tenetur odit omnis optio aliquid. Quisquam, numquam?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloremque corrupti exercitationem eos. Ducimus, sequi! Magnam, quidem veniam sit placeat voluptatum, error blanditiis amet tenetur odit omnis optio aliquid. Quisquam, numquam?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloremque corrupti exercitationem eos. Ducimus, sequi! Magnam, quidem veniam sit placeat voluptatum, error blanditiis amet tenetur odit omnis optio aliquid. Quisquam, numquam?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloremque corrupti exercitationem eos. Ducimus, sequi! Magnam, quidem veniam sit placeat voluptatum, error blanditiis amet tenetur odit omnis optio aliquid. Quisquam, numquam?</p>
<div class="js-scrollable">
<table class="table">
<tbody>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</tbody>
</table>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum doloremque, at, qui sequi officiis tempore rem quae tempora ut, dolorum autem! Nobis, modi! Labore eaque recusandae aspernatur, quibusdam quasi totam.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Recusandae, molestias a corrupti odit asperiores reiciendis. Officia, quisquam sequi. Aut laborum ab delectus ullam reiciendis ex quo facilis perferendis provident sit.</p>
</div>
<script src="../js/scroll-hint.js"></script>
<script>
new ScrollHint('.js-scrollable', {
// scrollHintIconAppendClass: 'scroll-hint-icon-white'
remainingTime: 5000
});
</script>
</body>
</html>