Skip to content

Commit 7d6cd39

Browse files
fiegfieg
committed
added overflow example
1 parent 7512e46 commit 7d6cd39

File tree

8 files changed

+233
-0
lines changed

8 files changed

+233
-0
lines changed

‎examples/overflow/.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules
2+
dist
3+
.cache
4+
package-lock.json
5+
.npmrc

‎examples/overflow/index.html‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
7+
<title>Overflow</title>
8+
9+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
10+
<link rel="stylesheet" href="./style.css"/>
11+
12+
</head>
13+
<body>
14+
15+
<div class="surface-container">
16+
<nav>
17+
<div class="nav nav-tabs" id="nav-tab" role="tablist">
18+
<a class="nav-item nav-link active" id="nav-overflow1-tab" data-toggle="tab" href="#nav-overflow1" role="tab" aria-controls="nav-overflow1" aria-selected="true">Overflow 1</a>
19+
<a class="nav-item nav-link" id="nav-overflow2-tab" data-toggle="tab" href="#nav-overflow2" role="tab" aria-controls="nav-overflow2" aria-selected="false">Overflow 2</a>
20+
</div>
21+
</nav>
22+
23+
<div class="tab-content" id="nav-tabContent">
24+
<div class="tab-pane fade show active" id="nav-overflow1" role="tabpanel" aria-labelledby="nav-overflow1-tab">
25+
<div class="overflow-container" id="overflow1">
26+
<div class="pager">
27+
<a href="page1.html" class="pager__next">Next &rightarrow;</a>
28+
</div>
29+
</div>
30+
</div>
31+
<div class="tab-pane fade" id="nav-overflow2" role="tabpanel" aria-labelledby="nav-overflow2-tab">
32+
<div class="overflow-container" id="overflow2">
33+
<div class="pager">
34+
<a href="page1.html" class="pager__next">Next &rightarrow;</a>
35+
</div>
36+
</div>
37+
</div>
38+
</div>
39+
</div>
40+
41+
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
42+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
43+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
44+
<script src="./index.js"></script>
45+
</body>
46+
</html>

‎examples/overflow/index.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import InfiniteAjaxScroll from '@webcreate/infinite-ajax-scroll';
2+
3+
window.ias1 = new InfiniteAjaxScroll('#overflow1', {
4+
scrollContainer: '#overflow1',
5+
item: '.item',
6+
next: '.pager__next',
7+
pagination: '#overflow1 .pager',
8+
});
9+
10+
window.ias2 = new InfiniteAjaxScroll('#overflow2', {
11+
scrollContainer: '#overflow2',
12+
item: '.item',
13+
next: '.pager__next',
14+
pagination: '#overflow2 .pager',
15+
});

‎examples/overflow/package.json‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"name": "infinite-ajax-scroll-overflow",
3+
"description": "An example of infinite scroll with overflow",
4+
"version": "1.0.0",
5+
"homepage": "https://infiniteajaxscroll.com",
6+
"repository": "github:webcreate/infinite-ajax-scroll",
7+
"bugs": "https://github.com/webcreate/infinite-ajax-scroll/issues",
8+
"author": {
9+
"company": "Webcreate",
10+
"name": "Jeroen Fiege",
11+
"web": "https://webcreate.nl"
12+
},
13+
"private": true,
14+
"scripts": {
15+
"build": "parcel build *.html --public-url ./",
16+
"watch": "parcel watch * --public-url ./",
17+
"link": "npm link ../../"
18+
},
19+
"keywords": [
20+
"infinite-ajax-scroll",
21+
"infinite-scroll",
22+
"infinite",
23+
"endless",
24+
"scroll",
25+
"scrolling",
26+
"ajax",
27+
"pagination",
28+
"ias",
29+
"jquery-ias"
30+
],
31+
"dependencies": {
32+
"@webcreate/infinite-ajax-scroll": "^3.0.0-beta.4"
33+
},
34+
"devDependencies": {
35+
"parcel-bundler": "^1.12.4"
36+
}
37+
}

‎examples/overflow/page1.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
7+
<title>Overflow Page 1</title>
8+
9+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
10+
<link rel="stylesheet" href="./style.css"/>
11+
</head>
12+
<body>
13+
14+
<div class="container">
15+
<div class="item">1</div>
16+
<div class="item">2</div>
17+
<div class="item">3</div>
18+
<div class="item">4</div>
19+
<div class="item">5</div>
20+
<div class="item">6</div>
21+
<div class="item">7</div>
22+
<div class="item">8</div>
23+
<div class="item">9</div>
24+
<div class="item">10</div>
25+
26+
<div class="pager">
27+
<a href="page2.html" class="pager__next">Next &rightarrow;</a>
28+
</div>
29+
</div>
30+
31+
</body>

‎examples/overflow/page2.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
7+
<title>Overflow Page 2</title>
8+
9+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
10+
<link rel="stylesheet" href="./style.css"/>
11+
</head>
12+
<body>
13+
14+
<div class="container">
15+
<div class="item">11</div>
16+
<div class="item">12</div>
17+
<div class="item">13</div>
18+
<div class="item">14</div>
19+
<div class="item">15</div>
20+
<div class="item">16</div>
21+
<div class="item">17</div>
22+
<div class="item">18</div>
23+
<div class="item">19</div>
24+
<div class="item">20</div>
25+
26+
<div class="pager">
27+
<a href="page3.html" class="pager__next">Next &rightarrow;</a>
28+
</div>
29+
</div>
30+
31+
</body>

‎examples/overflow/page3.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6+
7+
<title>Overflow Page 3</title>
8+
9+
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
10+
<link rel="stylesheet" href="./style.css"/>
11+
</head>
12+
<body>
13+
14+
<div class="container">
15+
<div class="item">21</div>
16+
<div class="item">22</div>
17+
<div class="item">23</div>
18+
<div class="item">24</div>
19+
<div class="item">25</div>
20+
<div class="item">26</div>
21+
<div class="item">27</div>
22+
<div class="item">28</div>
23+
<div class="item">29</div>
24+
<div class="item">30</div>
25+
26+
<div class="pager"></div>
27+
</div>
28+
29+
</body>

‎examples/overflow/style.css‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
body {
2+
margin: 0;
3+
padding: 0;
4+
}
5+
6+
.surface-container {
7+
max-width: 1128px;
8+
padding: 0 24px;
9+
margin: 80px auto 0;
10+
}
11+
12+
.overflow-container {
13+
height: 60vh;
14+
width: 100%;
15+
overflow: auto;
16+
border: solid 1px #dee2e6;
17+
border-top: 0;
18+
}
19+
20+
.item {
21+
height: 80px;
22+
margin: 16px;
23+
padding: 16px;
24+
border-radius: 4px;
25+
background-color: #9370db;
26+
color: #fff;
27+
}
28+
29+
.pager {
30+
text-align: center;
31+
}
32+
33+
#overflow1 .item {
34+
background-color: #9370db;
35+
}
36+
37+
#overflow2 .item {
38+
background-color: cornflowerblue;
39+
}

0 commit comments

Comments
 (0)