From b88c3c4c512b43fd893d92e6ecd3be27281cdbdd Mon Sep 17 00:00:00 2001 From: Sw1tlana <127736251+Sw1tlana@users.noreply.github.com> Date: Wed, 14 Feb 2024 17:45:04 +0200 Subject: [PATCH 1/2] changes scroll --- src/css/favorities-exercise.css | 8 ++++---- src/js/favorities.js | 24 +++++++++++++++++++++++- 2 files changed, 27 insertions(+), 5 deletions(-) diff --git a/src/css/favorities-exercise.css b/src/css/favorities-exercise.css index 70869a6..c98f739 100644 --- a/src/css/favorities-exercise.css +++ b/src/css/favorities-exercise.css @@ -88,6 +88,8 @@ } } +/* -------------- Section favorites --------------- */ + .container-section-favorites { position: relative; border-radius: 30px; @@ -97,6 +99,7 @@ width: 100%; height: 100%; background-color: var(--light-gray-background); + overflow: hidden; } /* Card */ @@ -120,10 +123,9 @@ } .scroll { - overflow-y: scroll; + /* overflow-y: hidden; */ overflow-x: hidden; height: 490px; - padding: 5px 0; } @@ -223,7 +225,6 @@ font-weight: 400; font-size: 20px; line-height: 1; - white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -257,7 +258,6 @@ display: none; } - .container-remove-favorites { width: 247px; position: absolute; diff --git a/src/js/favorities.js b/src/js/favorities.js index 8b2f578..7cb7af2 100644 --- a/src/js/favorities.js +++ b/src/js/favorities.js @@ -28,6 +28,9 @@ function displayFavoriteCards(savedCards) { hideRemoveCards(); smoothScrollToNextGroup(); } + // + checkContainerHeight(); + } refs.galleryWindow.addEventListener('click', deleteFavorites); @@ -43,6 +46,9 @@ function deleteFavorites(e) { showRemoveCards(); } } + // // + checkContainerHeight(); + } function removeFavoriteCard(id) { @@ -65,12 +71,25 @@ function smoothScrollToNextGroup() { if (favoritesItem) { const galleryItemHeight = favoritesItem.getBoundingClientRect().height; window.scrollBy({ - top: galleryItemHeight * 1, + // top: galleryItemHeight * 1, + top: 0, behavior: "smooth", }); } } +function checkContainerHeight() { + const container = refs.favoritesCard; + const extraSpace = 200; + const content = container.querySelector(".list-favorites"); + if (container.scrollHeight > container.clientHeight + extraSpace) { + container.style.overflowY = "scroll"; + console.log(scrollHeight); + } else { + container.style.overflowY = "hidden"; + } +} + savedCardsStorage(); function createCardFavorites(arr) { @@ -81,6 +100,9 @@ function createCardFavorites(arr) { const dataList = results.map(result => result.data); refs.favoritesCard.insertAdjacentHTML("beforeend", createMarkup(dataList)); + // + checkContainerHeight(); + }) .catch(err => console.error(err)); } From 95a7ade2a895a7c2f2ac89c99ca2eed933d68aec Mon Sep 17 00:00:00 2001 From: Sw1tlana <127736251+Sw1tlana@users.noreply.github.com> Date: Wed, 14 Feb 2024 18:09:45 +0200 Subject: [PATCH 2/2] add changes js --- src/js/favorities.js | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/src/js/favorities.js b/src/js/favorities.js index 7cb7af2..957adda 100644 --- a/src/js/favorities.js +++ b/src/js/favorities.js @@ -80,13 +80,20 @@ function smoothScrollToNextGroup() { function checkContainerHeight() { const container = refs.favoritesCard; - const extraSpace = 200; + const extraSpace = 200; // Додатковий простір const content = container.querySelector(".list-favorites"); - if (container.scrollHeight > container.clientHeight + extraSpace) { - container.style.overflowY = "scroll"; - console.log(scrollHeight); - } else { - container.style.overflowY = "hidden"; + const cardHeight = 165; // Висота однієї картки + const rowsToShow = 4; // Кількість рядків, після яких з'явиться скролбар + + if (content) { + const rowsCount = Math.ceil(content.children.length / 3); // Кількість рядків + + // Перевірка, чи кількість рядків перевищує задану кількість + if (rowsCount > rowsToShow) { + container.style.overflowY = "scroll"; + } else { + container.style.overflowY = "hidden"; + } } }