Hiding Scrollbars

#1 March 1st, 2007, 08:25 AM

Does anyone have a cross-browser solution for hiding
scrollbars and/or disabling scroll for the whole page?

When the user clicks something, I want to display a
DIV that fills the whole client area. While this DIV
is displayed, they can close it by clicking the close
button on the DIV. During the time this DIV is visible
though, I don't want them to be able to scroll (and
they usually can scroll because the page itself is
typically longer than the height of the browser). If
scrolling is allowed, then the DIV has to fight to keep
in a visible position and it looks ugly. Currently I hook
into the scroll event and constantly reposition the DIV
so it's filling the browser screen (by adjusting the top
and left offsets of the DIV to match the scroll amounts).

I had in mind the idea of hooking into the scroll event
and canceling the event but it seems a bit heavy
handed. I'd rather try and hide the scrollbar temporarily.
Ideally the solution would also somehow disable the
mouse scrollwheel (both modes of operation) too. If
blocking the mouse scrollwheel isn't so easy, it's not
such a biggie. It's the scrollbar that's the most important.

I have seen some pages do this in the past but I
can't seem to find any examples right now.

#2 March 1st, 2007, 08:35 AM

"dd" <dd4005@gmail.comwrote in message
news:1172740701.273893.161320@p10g2000cwp.googlegr oups.com...

Quote:

Does anyone have a cross-browser solution for hiding
scrollbars and/or disabling scroll for the whole page?
>
When the user clicks something, I want to display a
DIV that fills the whole client area. While this DIV
is displayed, they can close it by clicking the close
button on the DIV. During the time this DIV is visible
though, I don't want them to be able to scroll (and
they usually can scroll because the page itself is
typically longer than the height of the browser). If
scrolling is allowed, then the DIV has to fight to keep
in a visible position and it looks ugly. Currently I hook
into the scroll event and constantly reposition the DIV
so it's filling the browser screen (by adjusting the top
and left offsets of the DIV to match the scroll amounts).
>
I had in mind the idea of hooking into the scroll event
and canceling the event but it seems a bit heavy
handed. I'd rather try and hide the scrollbar temporarily.
Ideally the solution would also somehow disable the
mouse scrollwheel (both modes of operation) too. If
blocking the mouse scrollwheel isn't so easy, it's not
such a biggie. It's the scrollbar that's the most important.
>
I have seen some pages do this in the past but I
can't seem to find any examples right now.
>

Hi,

Not sure if this is what you're looking for, but try...

<body scroll="no">

Hope that helps

Andy

#3 March 1st, 2007, 10:05 AM

On Mar 1, 10:26 am, "Andrew Bailey" <a...@idontwantanyspam.comwrote:

Quote:

Hi,
>
Not sure if this is what you're looking for, but try...
<body scroll="no">
Hope that helps

That's good for IE but Firefox doesn't like it,
or at least it doesn't like it via Javascript
( document.body.scroll="no"; ).

I just found a cross-browser method:

document.body.style.overflow="hidden";
and
document.body.style.overflow="visible";

That disables the scrollbars nicely, but on
firefox there are mixed results. On older FF
(e.g. 1.0.x) you can still scroll with the
mousewheel. On FF2.0 they fixed that, but you
can still scroll by clicking on the mousewheel
(which gives you that floating navigation
circle).

I think I'll go with this. For most browsers,
and for most users, it'll solve the unsightly
effect I have where the DIV is trying to keep
in place via the scroll events. For those who
want to scroll using the mousewheel click
method, the anti-scroll code will still be there
doing it's job :)

#4 March 1st, 2007, 11:25 AM

dd a écrit :

Quote:

Does anyone have a cross-browser solution for hiding
scrollbars and/or disabling scroll for the whole page?

Perhaps with IE ? (andActiveX ...)
But no : impossible.

http://jquery.com/demo/thickbox/

idea :

<html>
<head>
<style type="text/css">
#alarm { color:red;background:moccasin;cursor:pointer;
margin-top:25%;text-align:center;}
</style>
<script type="text/javascript">
var E = new Array();
function showHide( messg) {
var B = document.getElementsByTagName('BODY')[0];
if(E.length==0) {
var D = B.getElementsByTagName('*');
var i = 0;
while(B.firstChild) {
E[i] = B.removeChild(B.firstChild);
i++;
}
}
if(!document.getElementById('alarm')) {
var M = document.createElement('H1');
M.id = 'alarm';
M.onclick = function() { showHide(); }
M.title = 'Click to close';
M.innerHTML = messg;
B.appendChild(M);
}
else {
B.removeChild(document.getElementById('alarm'));
for(var i=0; i<E.length; i++)
B.appendChild(E[i]);
E.length = 0;
}
}
</script>
</head>
<body>
<div style="border:1px solid black;height:500px">div 1<br>
<a href="#" onclick="showHide('Hello World');return false;">say
hello</a></div>
<div style="border:1px solid red;height:500px">div 2</div>
<div style="border:1px solid green;height:500px">div 3</div>
</body>
</html>

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date

#5 March 1st, 2007, 12:05 PM

dd a écrit :

Quote:

>
I just found a cross-browser method:
>
document.body.style.overflow="hidden";
and
document.body.style.overflow="visible";

doesn't work with my
- Safari 1.3.2
- Opera 9.0.

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date

#6 March 1st, 2007, 12:25 PM

On Mar 1, 1:58 pm, ASM wrote:

Quote:

doesn't work with my
- Safari 1.3.2
- Opera 9.0.

Aaah, I hadn't fired up my Mac to try Safari yet.
Can't say I'm surprised it doesn't work though.

I might have to accept that those two browsers
don't offer this enhanced ability. They're already
limited in what they can see so this will probably
not lead to much sadness with my employer. Their
opinion is basically this - we NEED it on IE and FF
and if we can get Safari too that would be nice.

#7 March 1st, 2007, 12:35 PM

On Mar 1, 1:10 pm, ASM wrote:

Quote:

idea :
....
E[i] = B.removeChild(B.firstChild);
....
B.appendChild(E[i]);
....

Nice idea, but I don't think I'd be allowed to do
that. There's a possibility I could break the page
and that would be totally unacceptable. I can find
my DIV (and my code that will enable/disable scroll)
appearing on ANY page on ANY site. I could find that
I'm being asked to disable scroll before the page
has even finished loading, in which case doing this
delete/restore of all objects on the page would be
a disaster. Nice idea though :)

#8 March 1st, 2007, 12:45 PM

dd a écrit :

Quote:

I'm being asked to disable scroll before the page
has even finished loading, in which case doing this
delete/restore of all objects on the page would be
a disaster.

Sure !

body.style.overflow doesn't work more with iCab

seems to only rest : FF and IE (?) ...

(with my Mac 10.3.9)
--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date

#9 March 2nd, 2007, 07:25 AM

On Mar 1, 11:18 am, "dd" <dd4...@gmail.comwrote:

Quote:

Does anyone have a cross-browser solution for hiding
scrollbars and/or disabling scroll for the whole page?
>
When the user clicks something, I want to display a
DIV that fills the whole client area. While this DIV
is displayed, they can close it by clicking the close
button on the DIV. During the time this DIV is visible
though, I don't want them to be able to scroll (and
they usually can scroll because the page itself is
typically longer than the height of the browser). If
scrolling is allowed, then the DIV has to fight to keep
in a visible position and it looks ugly. Currently I hook
into the scroll event and constantly reposition the DIV
so it's filling the browser screen (by adjusting the top
and left offsets of the DIV to match the scroll amounts).
>
I had in mind the idea of hooking into the scroll event
and canceling the event but it seems a bit heavy
handed. I'd rather try and hide the scrollbar temporarily.
Ideally the solution would also somehow disable the
mouse scrollwheel (both modes of operation) too. If
blocking the mouse scrollwheel isn't so easy, it's not
such a biggie. It's the scrollbar that's the most important.
>
I have seen some pages do this in the past but I
can't seem to find any examples right now.

My idea would be to create a DIV in which the whole content is
displayed!
Set the size to the window size.
Set the overflow to auto, when the page is showing normally.
When the user clicks something, set the overflow to none, display your
covering DIV and ...

Hope this helps,
John, Latvia

#10 March 2nd, 2007, 08:05 AM

On Mar 2, 9:13 am, "j.andersen" wrote:

Quote:

My idea would be to create a DIV in which the
whole content is displayed!
Set the size to the window size.
Set the overflow to auto, when the page is showing normally.
When the user clicks something, set the overflow to none, display your
covering DIV and ...

Thanks John, that is a good idea but would only
work if I was in control of the page. Unfortunately,
the pages that my DIV will appear on are out of my
control. It appears on many different pages from
many different sites and I have no influence on any
of them. That's why it's also difficult to implement
the solution ASM offered. I have to try and achieve
this with the minimum impact on the contents of the
page.

Hiding Scrollbars

Popular Articles

What is Bytes?