Gabriele Web Designer
unread,Mar 12, 2012, 9:00:39 AM3/12/12Sign in to reply to author
Sign in to forward
You do not have permission to delete messages in this group
Either email addresses are anonymous for this group or you need the view member email addresses permission to view the original message
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]