CODEWITHSUNDEEP
javascriptjqueryhtmlcssslick.js
B.B
B.B

Reputation: 164

How to display an icon only when the overflow of a container is active

I am trying to add a scroll arrow below specific divs that have overflow on them and only when the overflow is active. There are different containers with different heights and I only want this scroll arrow to appear on the ones that have overflow on them, is there a way to do this dynamically?

I have created a JS Fiddle to show my html, so basically when the 'slide' content exceeds the 900px max height it gets overflow but I want it to then display the arrow or the opposite effect and hide the arrow if overflow isnt active!

https://jsfiddle.net/h7r16cah/

<div class="large-12 columns">

  <div id="" class="large-9 columns page-content-right">
      <div class="slider">
            <div class="slide-large-content">
            </div>
            <div class="slide-small-content">
            </div>
      </div>
  </div> <!---end page content right -->

   <div class="large-9 columns">    
           <div class="scrollarrows-container">
                            <div class="chevron"></div>
                            <div class="chevron"></div>
                            <div class="chevron"></div>
                  </div>
            </div>
   </div>      
</div><!---end large 12 cols -->

Any help would be appreciated, and if you need more information let me know!

Thanks in advance

Upvotes: 5

Views: 1883

Answers (0)

Related Questions