Looking for a jquery or js solution for the following:
I have multiple articles (divs) on a page. Each article has a section within it that displays multiple icons in one row. Because the article divs are responsive in width, sometimes this icon row requires horizontal scrollbars.
I'd like to display some indicator (extra div or span) to each div that does have scrollbars/overflow, and not show the indicator on divs that have few icons and thus can't scroll horizontally.
Then, when user scrolls a certain icon row (to the right), the indicator for that particular section should be hidden. When user scrolls all the way to the left again, the indicator should be visible again.
$( document ).ready(function() {
$('.section .inner').scroll( function() {
var newScrollLeft = $('.inner').scrollLeft();
var divWidth = $('.inner').outerWidth();
var scrollwidth = $('.inner').get(0).scrollWidth;
if(newScrollLeft === scrollwidth - divWidth){
$('.inner ~ .indicator').css('background','blue')
} else {
$('.inner ~ .indicator').css('background','red')
}
});
});
.article {
background: silver;
width: 30%;
display: inline-block;
}
.section {
width: 100%;
height: 100px;
overflow: hidden;
position: relative;
}
.inner {
width: auto;
overflow-x: auto;
white-space: nowrap;
}
.indicator {
width: 20px;
height: 20px;
background: red;
position: absolute;
top: 0;
right: 0;
}
<div class="article">
<div class="section">
<div class="inner">
ABCDEFG HIJKLMN OPQRSTUVWXYZ ABCDEFGH IJKLMNOPQ RSTUVWXYZ
</div>
<div class="indicator"></div>
</div>
This one has a long line of text so it has scrollbars and should have the red indicator
</div>
</div>
<div class="article">
<div class="section">
<div class="inner">
ABCDEF
</div>
<div class="indicator"></div>
</div>
This one is short, no scrollbars, should NOT have the indicator
</div>
<div class="article">
<div class="section">
<div class="inner">
ABCDEFG HIJKLMN OPQRSTU VWXYZ
</div>
<div class="indicator"></div>
</div>
This one has a long line of text so it has scrollbars and should have the red indicator
</div>
Comments
Post a Comment