3

I have a <div> element with a fixed height and overflow:auto. I want to apply a style only when the content is large enough for it to scroll. Example: I want to apply a inset box shadow to the bottom of the box when it is scrollable, but when the content is not large enough I don't want the box shadow to be visible.

...Preferably not using script and as cross-browser as possible.

UPDATE

fiddle as requested

Thanks

hofnarwillie
  • 3,563
  • 10
  • 49
  • 73

1 Answers1

3

Unfortunately...you cant (using only CSS/HTML)

(sorry)

However, and I know you specified you don't want to use a script, but it is relatively straightforward, e.g. using jQuery:

Demo Fiddle

HTML

<div id="div1">
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
</div>
<div id="div2"></div>

jQuery

$.fn.toggleScrollClass = function () {
    this.each(function () {
        $(this).toggleClass('hasScroll', this.scrollHeight > this.clientHeight);
    });
}
$('div').toggleScrollClass();

CSS

div {
    border: 1px solid black;
    width: 100px;
    height:100px;
    overflow:auto;
}
.hasScroll {
    border: 1px solid red;
}
SW4
  • 69,876
  • 20
  • 132
  • 137
  • However you can find numerous examples on stackoverflow.com that use script to detect scroll, like http://stackoverflow.com/questions/4880381/check-whether-html-element-has-scrollbars , http://stackoverflow.com/questions/4814398/how-can-i-check-if-a-scrollbar-is-visible , and not limited to http://stackoverflow.com/questions/1768667/to-find-out-if-a-div-has-a-scrollbar – Ejaz May 13 '14 at 11:24
  • 1
    Thanks. I guess this should be the accepted answer since it's the best alternative. – hofnarwillie May 13 '14 at 11:35
  • Does this work on multiple elements at the same time? As in `$('.funkybox').toggleScrollClass();` it seems that it is changing all the elements based on the scrollable value of the first element. – hofnarwillie May 13 '14 at 11:57
  • @hofnarwillie - easily fixed: http://jsfiddle.net/swfour/p3FFL/984/ – SW4 May 13 '14 at 12:00
  • Thanks! Please tell me what the `interval` parameter is for? – hofnarwillie May 13 '14 at 12:02
  • @hofnarwillie - nothing, I've removed – SW4 May 13 '14 at 12:02