Problem with scrollbar height on desktop

94 views
Skip to first unread message

Gabriele Web Designer

unread,
Mar 12, 2012, 9:00:39 AM3/12/12
to iScroll
Hi,
I have a strange problem on desktop with the height of the scrollbar
and the scrollable div.
I made some change to the position of the wrapper. Now all the things
are fine, but in desktop browser the scrollbar don't allow to scroll
at the bottom of the scroller div. Only firefox has a good behavior.
The strange thing is that if I change the height or width of the
browser window the scrollbar works correctly.
Have you any suggestion?
This is the css:
[code]
#wrapper {
position:absolute; z-index:1;
width:275px;
height: 300px;
margin:200px 0 0 660px;
overflow:auto;
font: 14px Georgia, "Times New Roman", serif;
color: #fff;
}

#wrapper a {color:#fff;}

#wrapper p.date {font: 14px Georgia, "Times New Roman", serif;margin-
bottom:0;}

#wrapper h1{
color: #fff;
text-align:left;
font: 14px Georgia, "Times New Roman", serif;
text-transform: uppercase;
margin-bottom: 15px;
}

#scroller {
position:absolute; z-index:1;
/* -webkit-touch-callout:none;*/
-webkit-tap-highlight-color:rgba(0,0,0,0);
width:99%;
padding:0;
border-right:2px solid #666;
margin-left:-2px;
}

#scroller ul {
list-style:none;
padding:0;
margin:0;
width:95%;
text-align:left;
}

#scroller li {
padding:0 15px;
line-height:16px;
font-size:14px;
}

#scroller img {max-width:230px; height:auto;}

.myScrollbarV {
position:absolute;
z-index:100;
width:8px;height:300px;bottom:0px;top:0px;right:0px;
}

.myScrollbarV > div {
position:absolute;
z-index:100;
width:100%;

/* The following is probably what you want to customize */
background:-webkit-gradient(linear, 0 0, 100% 0, from(#fff),
to(#999));
background-image:-moz-linear-gradient(top, #fff, #999);
background-image:-o-linear-gradient(top, #fff, #999);
border:1px solid #666;
-webkit-background-clip:padding-box;
-moz-background-clip:padding-box;
-o-background-clip:padding-box;
background-clip:padding-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
-webkit-border-radius:2px;
-moz-border-radius:2px;
-o-border-radius:2px;
border-radius:2px;
-webkit-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
-moz-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
-o-box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
box-shadow:inset 1px 1px 0 rgba(255,255,255,0.5);
}

#myFrame {
position:absolute;
top:0; left:0;
}
[/code]
Reply all
Reply to author
Forward
0 new messages