javascript - How to detect when the height of your page changes? - Stack Overflow

admin管理员组

文章数量:1290067

I have a javascript heavy app which has widgets like autoplete dropdowns and tabs and so forth. Sometimes when dropdowns appear and disappear, or when you switch between tabs, it changes the height of the document. This can cause annoyances if the scrollbar appears and disappears rapidly, because it shifts the page. I would like to detect when a page changes its height, so I can fix the height to the maximum so far, so that if the scrollbar appears it won't disappear only a second later. Any suggestions?

Update: onresize won't work because that's for changes in the size of the viewport/window - I want changes in the length of the document. I hadn't known about the watch function, looks like it will work at least for FF, but IE doesn't support it.

I have a javascript heavy app which has widgets like autoplete dropdowns and tabs and so forth. Sometimes when dropdowns appear and disappear, or when you switch between tabs, it changes the height of the document. This can cause annoyances if the scrollbar appears and disappears rapidly, because it shifts the page. I would like to detect when a page changes its height, so I can fix the height to the maximum so far, so that if the scrollbar appears it won't disappear only a second later. Any suggestions?

Update: onresize won't work because that's for changes in the size of the viewport/window - I want changes in the length of the document. I hadn't known about the watch function, looks like it will work at least for FF, but IE doesn't support it.

• javascript
• html
• css

Share Improve this question Follow edited Dec 11, 2008 at 2:19 airportyh asked Dec 11, 2008 at 0:11 airportyhairportyh 22.7k1313 gold badges6060 silver badges7373 bronze badges 1

• 2 Possible duplicate of Detect Document Height Change – Aziz Commented Mar 7, 2016 at 14:33

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

I belive this question has already been answered on stackoverflow here: Detect Document Height Change

Basically you have to store the current document height and keep checking for a change via a timeoutcall

The element to watch here is document.body.clientHeight (or in jquery $(document).height() )

I think you can trap "onresize" events

here is a link to the w3schools. description

You can user resize event to trap the change of the size of window using jquery as follows:

$(window).resize(function(){
   // your code to check sizes and take action
  }
);

Alternately you can track the change in document (not tested)

$(document).resize(function(){
   // your code to check sizes and take action
  }
);

One idea would be to use the watch() method on the clientHeight property:

document.body.watch("clientHeight", function(property, oldHeight, newHeight) {
  // what you want to do when the height changes
});

The function you specify will get executed whenever the specified property changes. At any point you can use the unwatch() method to get it to stop.

本文标签： javascriptHow to detect when the height of your page changesStack Overflow