2

I'm trying to apply some styling rules to an element only if there is a scrollbar present. Is there a CSS-only solution to achieve this?

Charlie
  • 22,886
  • 11
  • 59
  • 90
eyurdakul
  • 894
  • 2
  • 12
  • 29
  • No, it is not possible by pure css, you have to use javacsript or jquery. – Alex Nov 12 '15 at 10:41
  • 1
    You can't do it solely by CSS. Take a look at [this answer](http://stackoverflow.com/a/4814526/1236613). – gcandal Nov 12 '15 at 10:43
  • 1
    @alirezasafian That would be an answer. – GolezTrol Nov 12 '15 at 10:44
  • Thanks guys. I've implemented a similar angular js solution but it is too much watchers for a simple feature so JS is not the option. – eyurdakul Nov 12 '15 at 10:46
  • @GolezTrol I prefer to insert this kind of answer as comment. – Alex Nov 12 '15 at 10:46
  • Maybe, just *maybe*, you could do something with a preprocessor (e.g. SASS) in which you check whether a wrapper element is smaller than its children, in which case it would get a scrollbar, and then apply a style on that element. Though I'm not entirely sure you can. – Bram Vanroy Nov 12 '15 at 10:48
  • @BramVanroy sass is a compile time processor. The scrollbar visibility is depended on screen size, content etc. Thanks anyway. – eyurdakul Nov 12 '15 at 10:54
  • Partially true. If you are working with static widths, a preprocessor could work because all the info you need is there. But I suppose that you could hard-code it anyway then, so you're rght. – Bram Vanroy Nov 12 '15 at 11:06

1 Answers1

4

As of HTML5 and CSS3 it is not possible to apply styles depending on the presence of the scroll bar only using those two technologies.

Charlie
  • 22,886
  • 11
  • 59
  • 90