/    Sign up×
Community /Pin to ProfileBookmark

verify if a scrollbar exists

Copy linkTweet thisAlerts:
Mar 30.2004

Is there a way to find if a document has a height greater than the available space (thus, to find out if a scroll bar was activated…)?

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@TageMar 30.2004 — Compare document.yourObject.clientWidth to document.yourObject.scrollWidth for horizontal scrollbar.

Compare document.yourObject.clientHeight to document.yourObject.scrollHeight for vertical scrollbar.

If the client number is smaller than the scroll number, your scrollbar is active; I've only tried this in IE, hope that helps X.x later
Copy linkTweet thisAlerts:
@PittimannMar 30.2004 — Hi!

We already had that, Kor:

http://forums.webdeveloper.com/showthread.php?s=&threadid=27717

To Tage: your suggestion works (and it does so in Mozilla as well) ?

Cheers - Pit
Copy linkTweet thisAlerts:
@KorauthorMar 30.2004 — Thanks... but it looks like IE and NS7 take different values when document.body.scrollHeight, at least in the code bellow. I try to find a dinamic and easy way to expand an iframe no longer than the client available height, nomatter the resolution.

[code=php]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script>
function ifrHeight(){
alert(document.body.clientHeight);
alert(document.body.scrollHeight);
for(i=1;i<document.body.scrollHeight;i++){
document.getElementById('ifr').style.height=i;
if(document.body.scrollHeight>=document.body.clientHeight){break}
}
alert(document.getElementById('ifr').style.height);
}
window.onload = ifrHeight;
</script>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="80" align="center" bgcolor="#CCCCCC">head</td>
</tr>
</table>
<iframe src="iframe.html" name="ifr" id="ifr" style="position:absolute;top:100"></iframe>
</body>
</html>
[/code]
Copy linkTweet thisAlerts:
@TageMar 30.2004 — DynamicDrive seems to have something exactly like that here

[URL]http://www.dynamicdrive.com/dynamicindex17/iframessi.htm[/URL]

It looks like it works in NS6+ as well. Hope you can learn from that script.
Copy linkTweet thisAlerts:
@PittimannMar 30.2004 — Hi!

Based on your code, Kor, try this:
[code=php]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script>
function ifrHeight(){
for(i=1;i<document.body.scrollHeight;i++){
if(document.body.scrollHeight<=document.body.clientHeight){
document.getElementById('ifr').style.height=i;
}
}
document.getElementById('ifr').style.height=parseInt(document.getElementById('ifr').style.height)-2;//to avoid "main" scrollbar
}
window.onload = ifrHeight;
</script>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="80" align="center" bgcolor="#CCCCCC">head</td>
</tr>
</table>
<iframe src="showScrollValue.htm" name="ifr" id="ifr" style="position:absolute;top:100"></iframe>
</body>
</html>
[/code]
Works in IE and Mozilla...

Cheers - Pit
Copy linkTweet thisAlerts:
@KorauthorMar 30.2004 — Thanks, Pittimann, it works now with Mozilla/5.0 and Gecko/20021120... Yet I don't understand WHY my former code woun't work for them...
×

Success!

Help @Kor spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...