Donate. I desperately need donations to survive due to my health

Get paid by answering surveys Click here

Click here to donate

Remote/Work from Home jobs

Multiple responsive divs, change css if one of those divs has scrollbar

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.

Jsfiddle here

$( 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