Triggers
Instead of loading next pages on scroll you can use a trigger. A trigger is a link or button that has to be clicked before the next page is loaded.
Reasons for a trigger might be:
- To make the footer reachable.
- To ease the load on the server. Users have to click before loading the next page. This adds a natural delay.
First add a button to your document
1
<button class="load-more">Load More</button>
Copied!
Next add a bit of CSS to make it look nice and hide if from view (opacity 0)
1
.load-more {
2
display: inline-block;
3
height: 32px;
4
padding: 0 16px;
5
border: 1px solid #aaa;
6
border-radius: 4px;
7
opacity: 0;
8
font-family: Lucida Grande,Lucida Sans Unicode,Lucida Sans,Geneva,Arial,sans-serif;
9
font-size: 14px;
10
font-weight: 400;
11
line-height: 30px;
12
color: #555;
13
background-color: #fff;
14
cursor: pointer;
15
transition: opacity .4s;
16
}
17
​
18
.load-more:hover {
19
color: #F63840;
20
border: solid 1px #F63840;
21
}
Copied!
Next configure the trigger.
1
let ias = new InfiniteAjaxScroll(/*..*/, {
2
// other options here
3
​
4
trigger: '.load-more'
5
});
Copied!
Last modified 7mo ago
Copy link