0

i am currently creating a web site and my problem is, that I have to put two DIVs on the page, that enable scrolling either one screen back or forth with a mouse click instead of the scrollbar (which is also usable) and I want them only to be visible, when there actually is something to scroll. So when the content fits into another DIV, there should not be any scroll back/forth button visible. They may take the space (or not) but I do not want them visible.

Now, I could poll the offsetWidth and scrollWidth of that other DIV with a 100ms interval, compare them and decide the visibility, but that is really ugly.

Is there some event I cloud use except resize, because that would not work on mobile/mac? I did not find anything (yet) - neither on SO nor on the internet.

Thanks

Andreas
  • 828
  • 4
  • 15
  • I think you are looking for: there's any css pseudoselector for `:overflow`? and the answer is probably not unless you rely somehow on the newest container queries. There's a most recent answer on this [SO question](https://stackoverflow.com/questions/13213197/is-there-a-css-pseudo-selector-for-overflow/73052658#73052658) suggesting that. – Diego D Feb 03 '23 at 10:33
  • I think you should still rely on js. You may get there with creative ways like trying to target elements with given condition being `visible` on the viewport but again no luck: [Is there a CSS :visible (scroll) selector?](https://stackoverflow.com/questions/10184065/is-there-a-css-visible-scroll-selector) – Diego D Feb 03 '23 at 10:34
  • Thank you for your answer. As I understand, there seems to be no CSS-only way. And since MAC and Mobile has been declared out of scope, I‘ll go with the resize event. – Andreas Feb 04 '23 at 19:48

0 Answers0