Skip to content

Commit 9329356

Browse files
saeedkohansalsaeedkohansal
authored
Add files via upload
1 parent fcfc083 commit 9329356

File tree

7 files changed

+385
-0
lines changed

7 files changed

+385
-0
lines changed

‎image/Vanilla-JavaScript-Infinite-Scroll-HTML-CSS-JS.png‎

99.9 KB
Loading

‎image/Vanilla-JavaScript-Infinite-Scrolling-Feature-Logic.png‎

156 KB
Loading

‎source-code/assets/infinite-scroll.js‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
let currentPage = 1; // Data pagination
2+
3+
4+
// Infinite scroll feature | Works perfectly on Desktop & Mobile versions
5+
function infiniteScroll() {
6+
// Getting elements
7+
const spinnerIcon = document.querySelector(".spinner");
8+
const addNewData = document.querySelector(".data");
9+
10+
// Define options
11+
const itemPerLoad = 6; // How much items per load
12+
const maxItems = 20; // Maximum items
13+
14+
// Detecting the end of the page (When the user reaches the bottom of the page)
15+
const endOfThePage = window.innerHeight + window.pageYOffset >= document.body.offsetHeight;
16+
17+
// If the user reaches the bottom of the page
18+
if (endOfThePage) {
19+
// Page counter
20+
currentPage++;
21+
22+
// Before we reach the maximum number of items (How much data we want to display)
23+
if (currentPage <= maxItems) {
24+
// Load & display new items (For example 6 items per load)
25+
for (let i = 0; i < itemPerLoad; i++) {
26+
// Create & display new element with new data
27+
const newItem = document.createElement("h1");
28+
29+
// Set class with loading animation
30+
newItem.setAttribute(
31+
"class", "animate__animated animate__zoomInUp animate__slower"
32+
);
33+
34+
// Set text for new item
35+
newItem.innerText = "Datalist " + currentPage;
36+
37+
// Add new item to the target
38+
addNewData.append(newItem);
39+
40+
// Display spinner icon
41+
spinnerIcon.style.display = "block";
42+
}
43+
} else if (document.querySelector(".the-end") == null) {
44+
/*
45+
When we reach the `maxItems`
46+
Create `.the-end` element only once
47+
*/
48+
49+
// Create & display new element with new data
50+
const newItem = document.createElement("h1");
51+
52+
// Set `the-end` class with animation
53+
newItem.setAttribute("class",
54+
"the-end animate__animated animate__jello animate__slower animate__infinite"
55+
);
56+
57+
// Set text for new item
58+
newItem.innerText = "The End!";
59+
60+
// Add new item to the target
61+
addNewData.append(newItem);
62+
63+
// Hide spinner icon
64+
spinnerIcon.style.display = "none";
65+
}
66+
}
67+
}
68+
69+
70+
// Run when page is being scrolled
71+
window.addEventListener("scroll", infiniteScroll);

‎source-code/assets/scroll-position.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
// Display scroll postion info | `.scroll-position`
2+
function scrollPosition() {
3+
/* ---------------- */
4+
/* Getting elements */
5+
/* ---------------- */
6+
const startOfThePageElem = document.querySelector(".start-of-the-page");
7+
const endOfThePageElem = document.querySelector(".end-of-the-page");
8+
const innerHeightElem = document.querySelector(".inner-height");
9+
const ipageYOffsetElem = document.querySelector(".page-y-offset");
10+
const offsetHeightElem = document.querySelector(".offset-height");
11+
const scrolledPercentageElem = document.querySelector(".scrolled-percentage");
12+
const scrolledPercentageCalc = window.scrollY / (document.documentElement.scrollHeight - document.documentElement.clientHeight) * 100;
13+
14+
/* ---------------------------- */
15+
/* Display scroll position data */
16+
/* ---------------------------- */
17+
if (window.pageYOffset == 0) {
18+
startOfThePageElem.innerHTML = 'Start Of The Page: <span class="true">true</span>';
19+
} else {
20+
startOfThePageElem.innerHTML = 'Start Of The Page: <span class="false">false</span>';
21+
}
22+
if (window.innerHeight + window.pageYOffset >= document.body.offsetHeight) {
23+
endOfThePageElem.innerHTML = 'End Of The Page: <span class="true">true</span>';
24+
} else {
25+
endOfThePageElem.innerHTML = 'End Of The Page: <span class="false">false</span>';
26+
}
27+
28+
innerHeightElem.innerHTML = 'window.innerHeight: <span class="integer">' + window.innerHeight + '</span>';
29+
ipageYOffsetElem.innerHTML = 'window.pageYOffset: <span class="integer">' + window.pageYOffset + '</span>';
30+
offsetHeightElem.innerHTML = 'document.body.offsetHeight: <span class="integer">' + document.body.offsetHeight + '</span>';
31+
scrolledPercentageElem.innerHTML = 'Scroll Percentage: <span class="percentage">' + parseInt(scrolledPercentageCalc) + '%</span>';
32+
}
33+
34+
35+
// Run when page is loaded
36+
scrollPosition();
37+
38+
39+
// Run when page is being scrolled
40+
window.addEventListener("scroll", scrollPosition);

‎source-code/assets/spinner.svg‎

Lines changed: 84 additions & 0 deletions
Loading

‎source-code/assets/style.css‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
:root {
2+
color-scheme: dark;
3+
}
4+
5+
body {
6+
font-family: "Barlow";
7+
margin: 0;
8+
color: #000;
9+
background-color: #fff;
10+
}
11+
12+
a {
13+
color: #f00;
14+
font-weight: bold;
15+
transition: .4s;
16+
}
17+
18+
a:hover {
19+
color: #ff6868;
20+
}
21+
22+
h1 {
23+
text-align: center;
24+
font-size: 80px;
25+
margin: 0;
26+
padding: 20px;
27+
text-transform: uppercase;
28+
}
29+
30+
.title {
31+
animation: slideInDown;
32+
animation-duration: 2s;
33+
}
34+
35+
.hint {
36+
display: block;
37+
float: left;
38+
position: sticky;
39+
top: 30px;
40+
text-align: center;
41+
background-color: #efefef;
42+
width: 40%;
43+
border-radius: 0 50px 50px 0;
44+
animation: slideInLeft;
45+
animation-duration: 2s;
46+
z-index: 9;
47+
}
48+
49+
.hint h2 {
50+
font-size: 40px;
51+
margin: 0;
52+
padding: 20px;
53+
font-weight: normal;
54+
}
55+
56+
.scroll-position {
57+
display: block;
58+
float: right;
59+
position: sticky;
60+
top: 30px;
61+
text-align: center;
62+
background-color: #efefef;
63+
width: 40%;
64+
border-radius: 50px 0 0 50px;
65+
animation: slideInRight;
66+
animation-duration: 2s;
67+
z-index: 9;
68+
}
69+
70+
.scroll-position h2 {
71+
font-size: 40px;
72+
margin: 0;
73+
padding: 20px;
74+
font-weight: normal;
75+
}
76+
77+
.integer {
78+
font-size: 60px;
79+
color: #4caf50;
80+
font-weight: bold;
81+
}
82+
83+
.percentage {
84+
font-size: 60px;
85+
color: #df82ff;
86+
font-weight: bold;
87+
}
88+
89+
.true {
90+
font-size: 60px;
91+
color: #4a6bff;
92+
font-weight: bold;
93+
}
94+
95+
.false {
96+
font-size: 60px;
97+
color: #f54;
98+
font-weight: bold;
99+
}
100+
101+
.spinner {
102+
display: block;
103+
margin: 0 auto;
104+
width: 300px;
105+
user-select: none;
106+
pointer-events: none;
107+
}
108+
109+
.data .first-articles {
110+
color: #666;
111+
}
112+
113+
.data h1 {
114+
font-size: 50px;
115+
color: #ff9b44;
116+
}
117+
118+
.the-end {
119+
color: #ff0 !important;
120+
background-color: #222;
121+
width: 50%;
122+
margin: 40px auto 0;
123+
border-radius: 100px 100px 0 0;
124+
}
125+
126+
@media only screen and (max-width: 1200px) {
127+
.hint,
128+
.scroll-position {
129+
display: none;
130+
}
131+
.title {
132+
font-size: 18px;
133+
}
134+
}

0 commit comments

Comments
 (0)