Geek Answers Handbook

Detect when a <div> shows or hides the scroll bar

Is there a way to detect when a div shows or hides a scrollbar? When the scroll bar is displayed, I want to resize the controls inside the div so that the scroll bar does not cover them.

So, I need an event that fires when the scroll bar appears and disappears. Thanks, Brian

+4
source share
3 answers

It seems like a lot of work for 20px. You might want to rethink your design. But I will bite.

There is no "elementGotBigger" event to detect that you need to know before which user interactions the following may occur:

  • Ready for the DOM
  • Window resizing
  • Some other event that you know may cause a change (perhaps part of the navigation).

Each of these events then triggers a function that checks

  • Item Size Compared to
  • The scroll size of the item.

Then, if the scroll size is larger than the size of the element, do something.

Here is an example with mootools: http://mooshell.net/HC3g9/

+1
source

You can wrap the content in another DIV - then you can determine the height of the content and resize it if it is higher than the containing DIV. JQuery example:

if($('#content-wrapper-div').height() > $('#scrolling-div').height()) { var oldWidth = $('#content-wrapper-div').width(); $('#content-wrapper-div').css('width', (oldWidth - 20) + 'px') }

"20" can be changed depending on the width of the scroll bar (or you can use the height or resize individual controls there).

+2
source

Your question intrigued me, and I was not enthusiastic about another answer (no offense, it seemed, was hacked), although this might work. In googling A Better Way, I came across this jQuery plugin . Using something like this would be good, because different browsers can display the scroll bar in different widths.

0
source

More articles:


All Articles