Issue
I have a horizontal list of divs, and I want to display the remaining items count while scrolling.
Here's a playground code i try on
.horizontal {
border: 3px solid #000;
display: flex;
gap: 0 10px;
width: 200px;
height: 100px;
overflow-x: scroll;
}
.item {
background-color: #f00;
min-width: 50px;
}
.count {
position: absolute;
background-color: #ffffff8a;
width: 50px;
left: 160px;
height: 85px;
}
<div class="horizontal">
<div class="item"> A </div>
<div class="item"> B </div>
<div class="item"> C </div>
<div class="item"> D </div>
<div class="item"> E </div>
<div class="item"> F </div>
<div class="item"> G </div>
<div class="item"> H </div>
<div class="item"> I </div>
<div class="count"> Count </>
</div>
So, How can i replace the count word with the actual remaining count?
Solution
Something like this - you may want to add 6 for the border on both sides of the divs
const count = document.querySelector(".count");
const divs = document.querySelectorAll(".item").length;
document.querySelector(".horizontal").addEventListener("scroll", function() {
count.textContent = divs - parseInt(this.scrollLeft / 50)
})
.horizontal {
border: 3px solid #000;
display: flex;
gap: 0 10px;
width: 200px;
height: 100px;
overflow-x: scroll;
}
.item {
background-color: #f00;
min-width: 50px;
}
.count {
position: absolute;
background-color: #ffffff8a;
width: 50px;
left: 160px;
height: 85px;
}
<div class="horizontal">
<div class="item"> A </div>
<div class="item"> B </div>
<div class="item"> C </div>
<div class="item"> D </div>
<div class="item"> E </div>
<div class="item"> F </div>
<div class="item"> G </div>
<div class="item"> H </div>
<div class="item"> I </div>
<div class="count"> Count </div>
</div>
Answered By - mplungjan
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.