Scrollbars disabled in my HTML/CSS? while using Progid Microsoft gradient.
NOTE: Please see the bottom of question for update!
Here is an extract (sample) of my HTML/CSS:
html { height: 100%; }
body
{
height: 100%;
margin: 0px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6699CC', endColorstr='#1C3854');
}
.container
{
display: inline-block;
width: 50%;
}
.box
{
width: 80%;
margin-left: auto;
margin-right: auto;
}
and
<body>
<div class="container">
<div class="box">
<!-- content 1 -->
</div>
</div><div class="container">
<div class="box">
<!-- content 2 -->
</div>
</div>
</body>
This page only needs to work in IE8+ (since it is running on SOE).
When the browser is maximised and/or there is very little content, there are no scrollbars, as expected.
When the browser is small a开发者_如何学JAVAnd/or there is lots of content, there are scroll bars however they are greyed out. The user is unable to scroll to stuff off the edge of the visible region.
I have tried specifying an overflow property on HTML and body but it still only gives greyed-out scroll bars.
Commenting out the height: 100% for html/body seems to fix vertical scrolling but not horizontal - however it breaks my gradient.
What am I doing wrong?
UPDATE: I was trying to put together a sample with lorem-ipsum content to show the problem for jQuerybeast, and I found that scroll was suddenly working: I was initially confused but then realised I hadn't included the background gradient (filter:progid......). As soon as I added the gradient, scroll stopped working. Why is this gradient breaking scroll?
Unfortunately there is no good solution around it.
Worse yet: progid:DXImageTransform.Microsoft.gradient is horribly buggy so mouse events (hover, click, scrolls etc.) are buggy. - Beware!
Regardless, you better start considering which fallbacks/workarounds/NastyHacks feel acceptable to you.
You can consider to use a gradient background image and repeat it accordingly.
The solution I found was to set the overflow after some event, something like this:
.gradient{ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#CCCCCC',GradientType=0 ); }
$('html, body').animate({scrollTop:$('#mydivid').position().top}, 'fast').css('overflow', 'auto');
加载中,请稍侯......
精彩评论