anatolykopyl/scrollable-cards
1
0
Fork 0
mirror of https://github.com/anatolykopyl/scrollable-cards.git synced 2026-03-26 15:04:36 +00:00
Code Issues Projects Releases Wiki Activity

Добавил кнопку чтобы скроллить

Browse Source
This commit is contained in:
Anatoly Kopyl
2021-04-14 13:47:35 +03:00
parent 3958f0b76c
commit 39974fe4e8
3 changed files with 69 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -11,7 +11,7 @@
<body> <body>
<div id='cardholder'></div> <div id='cardholder'></div>
<span id="scroll_btn">👀</span> <div id="scroll_btn">👀</div>
<script src='main.js'></script> <script src='main.js'></script>
</body> </body>

53
main.js
View File

@@ -1,38 +1,39 @@
function findGetParameter(parameterName) { function findGetParameter(parameterName) {
var result = null, let result = null
tmp = []; let tmp = []
location.search location.search
.substr(1) .substr(1)
.split("&") .split("&")
.forEach(function (item) { .forEach(function (item) {
tmp = item.split("="); tmp = item.split("=");
if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]); if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1])
}); })
return result; return result
} }
const cardholder = document.getElementById('cardholder')
const scroll_btn = document.getElementById('scroll_btn')
let cards_amount = findGetParameter('n')
let current_card = 0
const InsertCard = (card_obj) => { const InsertCard = (card_obj) => {
const card = document.createElement('div'); const card = document.createElement('div');
card.classList.add('card') card.classList.add('card')
img_el = document.createElement('img') const img_el = document.createElement('img')
Object.assign(img_el, { src: card_obj.url }); Object.assign(img_el, { src: card_obj.url })
card.appendChild(img_el) card.appendChild(img_el)
text = document.createElement('p') const text = document.createElement('p')
text.innerHTML = card_obj.title; text.innerHTML = card_obj.title
card.appendChild(text) card.appendChild(text)
document.getElementById('cardholder').appendChild(card) cardholder.appendChild(card)
}; }
let cards_amount = findGetParameter('n')
let current_card = 0
function getCards() { function getCards() {
fetch('https://jsonplaceholder.typicode.com/photos?_start=' + current_card + '&_limit=' + cards_amount) fetch('https://jsonplaceholder.typicode.com/photos?_start=' + current_card + '&_limit=' + cards_amount)
.then((response) => response.json()) .then((response) => response.json())
.then((json) => { .then((json) => {
json.forEach(card => { json.forEach(card => {
console.log(card)
InsertCard(card) InsertCard(card)
}) })
current_card += Number(cards_amount) current_card += Number(cards_amount)
@@ -41,16 +42,22 @@ function getCards() {
getCards() getCards()
let lastKnownScrollPosition = 0; let ticking = false
function updCards(scrollPos) { cardholder.onscroll = function () {
if (scrollPos === 0) { let pos = cardholder.scrollWidth - cardholder.clientWidth - cardholder.scrollLeft
getCards()
if (!ticking) {
window.requestAnimationFrame(function () {
if (pos <= cardholder.clientWidth)
getCards()
ticking = false
})
ticking = true
} }
} }
let cardholder = document.getElementById('cardholder') scroll_btn.onclick = function () {
cardholder.onscroll = function (e) { cardholder.scrollLeft += cardholder.clientWidth
lastKnownScrollPosition = cardholder.scrollWidth - cardholder.clientWidth - cardholder.scrollLeft;
updCards(lastKnownScrollPosition);
} }

45
style.css
View File

@@ -1,29 +1,60 @@
* { * {
margin: 0; margin: 0;
text-align: center; text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: rgb(41, 41, 41)
}
body {
background-color: rgb(241, 241, 241);
} }
#cardholder { #cardholder {
width: 100%; width: 100%;
display: flex;
flex-wrap: nowrap;
overflow-x: auto; overflow-x: auto;
white-space: nowrap; scroll-behavior: smooth;
} }
#scroll_btn { #scroll_btn {
background-color: white;
margin: auto;
font-size: xx-large; font-size: xx-large;
cursor: pointer; cursor: pointer;
border-radius: 50%;
width: 1.5em;
height: 1.5em;
box-shadow: 1px 1px 10px rgba(71, 71, 71, 0.397);
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Safari */
-khtml-user-select: none;
/* Konqueror HTML */
-moz-user-select: none;
/* Old versions of Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
} }
.card { .card {
display: inline-block; background-color: white;
padding: 10px; padding: 1em;
margin: 10px; margin: 1em;
border: 1px solid;
border-radius: 12px;
width: 400px; width: 400px;
flex: 0 0 auto;
border-radius: 12px;
box-shadow: 1px 1px 10px rgba(71, 71, 71, 0.397);
} }
img { .card img {
max-width: 100%; max-width: 100%;
border-radius: 7px; border-radius: 7px;
} }
.card p {
width: 90%;
margin: 1em auto 0 auto;
}