Hiding Scrollbars

D

dd

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.
 
D

dd

Hi,

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

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 :)
 
A

ASM

dd a écrit :
Does anyone have a cross-browser solution for hiding
scrollbars and/or disabling scroll for the whole page?
Click to expand...

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 = 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>
 
A

ASM

dd a écrit :
I just found a cross-browser method:

document.body.style.overflow="hidden";
and
document.body.style.overflow="visible";
Click to expand...

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

dd

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

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.
 
D

dd

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


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 :)
 
A

ASM

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.
Click to expand...

Sure !

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

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

(with my Mac 10.3.9)
 
J

j.andersen

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.
Click to expand...

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
 
D

dd

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 ...
Click to expand...

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Troubles with Fullpage / please help 0
IE scrollbars 0
Hiding <DIV> containing <INPUT> tags onmouseout 1
problem getting mouse coords in scrolled area from overflow: auto 1
can't disable scrollbars for certain websites 0
image links get scrollbars when clicking 1
document.location = 'some href', why a delay in IE? 2
Trouble attempting to create a custom vertical scrollbar / slider 3

Members online

Total: 36 (members: 1, guests: 35)
Robots: 340

Forum statistics

Threads
473,769
Messages
2,569,582
Members
45,067
Latest member
HunterTere

Latest Threads

Top