zoriya/RaccoonWebsite
1
0
Fork 0
mirror of https://github.com/zoriya/RaccoonWebsite.git synced 2026-06-02 18:50:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Making scroller buttons work.

Browse Source
This commit is contained in:
Tristan Roux
2019-01-22 21:36:48 +01:00
parent 542796022f
commit 4ec7d05860
2 changed files with 8 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
en/index.html
+1 -1
View File
@@ -78,7 +78,7 @@
<div class="container-fluid" style="background-color: darkslategray;">
<div class="row align-items-center text-center text-light pt-3 pb-3" style="position: relative;">
<h1 class="pl-5">Screenshots</h1>
<button id="left-scroll" style="position: absolute; left: 0; top: 50%;"><i class="fas fa-chevron-left"></i></button>
<button id="left-scroll" style="position: absolute; left: 0; top: 50%; display: none;"><i class="fas fa-chevron-left"></i></button>
<button id="right-scroll" style="position: absolute; right: 0; top: 50%;"><i class="fas fa-chevron-right"></i></button>
<div class="screenshots">
<img class="screenshot" style="padding-left: 4rem;" src="../drawables/MusicApp/Screenshots/1.jpg" ondragstart="return false;">
js/horizontalScrolling.js
+7 -4
View File
@@ -22,7 +22,10 @@ sliders.forEach((slider) =>
else
document.getElementById("left-scroll").style.display = "inline-block";
if (slider.scrollLeft + 10 >= slider.scrollWidth - slider.clientWidth)
document.getElementById("right-scroll").style.display = "none";
else
document.getElementById("right-scroll").style.display = "inline-block";
}
});
@@ -40,7 +43,7 @@ sliders.forEach((slider) =>
slider.scrollBy({ top: 0, left: -slider.offsetWidth * 0.66, behavior: "smooth" });
document.getElementById("right-scroll").style.display = "inline-block";
if (slider.scrollLeft == 0)
if (slider.scrollLeft - slider.offsetWidth * 0.66 <= 0)
document.getElementById("left-scroll").style.display = "none";
}
@@ -49,10 +52,10 @@ sliders.forEach((slider) =>
slider.scrollBy({ top: 0, left: slider.offsetWidth * 0.66, behavior: "smooth" });
document.getElementById("left-scroll").style.display = "inline-block";
console.log("Offset: " + slider.scrollWidth);
console.log("Offset: " + (slider.scrollWidth - slider.clientWidth));
console.log("Scroll: " + slider.scrollLeft);
if (slider.scrollLeft == slider.scrollWidth)
if (slider.scrollLeft + slider.offsetWidth * 0.66 + 10 >= slider.scrollWidth - slider.clientWidth)
document.getElementById("right-scroll").style.display = "none";
}
});