Hiding Scrollbars

dd · Mar 1, 2007

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.

dd · Mar 1, 2007

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

ASM · Mar 1, 2007

dd a écrit :

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

ointer;
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 = 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);
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>

ASM · Mar 1, 2007

dd a écrit :

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.

dd · Mar 1, 2007

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.

dd · Mar 1, 2007

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

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

ASM · Mar 1, 2007

dd a écrit :

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)

j.andersen · Mar 2, 2007

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

dd · Mar 2, 2007

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.

Troubles with Fullpage / please help	0	Dec 14, 2023
IE scrollbars	0	Aug 27, 2010
Hiding <DIV> containing <INPUT> tags onmouseout	1	Apr 6, 2007
problem getting mouse coords in scrolled area from overflow: auto	1	Jun 24, 2009
can't disable scrollbars for certain websites	0	Aug 4, 2004
image links get scrollbars when clicking	1	Sep 9, 2007
document.location = 'some href', why a delay in IE?	2	May 12, 2009
Trouble attempting to create a custom vertical scrollbar / slider	3	May 12, 2006

Hiding Scrollbars

dd

dd

ASM

ASM

dd

dd

ASM

j.andersen

dd

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads