mirror of
https://github.com/Hopiu/jquery-mobile.git
synced 2026-03-17 14:30:28 +00:00
dbdfd23541
This version supports simulated scrolling via the CSS3 transform property by default, but also supports an option for positioning the old-fashioned way with top and left properties. Still some code clean-up to do, but folks can start playing with it. Some items/issues left to look into: - Experiment with event delegation so we can implement nested scrollviews. - Implement scroll direction locking. - Decide whether to conditionally inject clip/view markup. - Decide on final ui class names. - Decide on how scrolling behavior is actually invoked. (data-* attribute or class) - Decide on final set of notifications we'll need to fire off. - Add an API so that scroll position can be adjusted after a resize/orientation change. - Documentation that describes potential problems with performance, memory usage, etc, and workarounds.
77 lines
1 KiB
CSS
77 lines
1 KiB
CSS
@charset "utf-8";
|
|
|
|
.ui-scrollview-clip {
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.ui-scrollview-view {
|
|
position: relative;
|
|
overflow: hidden;
|
|
top: 0;
|
|
left: 0;
|
|
/*
|
|
min-width: 100%;
|
|
min-height: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
*/
|
|
}
|
|
|
|
.ui-scrolllistview .ui-li-divider {
|
|
z-index: 10;
|
|
}
|
|
|
|
.ui-scrollbar {
|
|
position: absolute;
|
|
overflow: hidden;
|
|
|
|
opacity: 0;
|
|
-webkit-transition: opacity 500ms;
|
|
-moz-transition: opacity 500ms;
|
|
transition: opacity 500ms;
|
|
}
|
|
|
|
.ui-scrollbar-visible {
|
|
opacity: 1;
|
|
}
|
|
|
|
.ui-scrollbar-vertical {
|
|
top: 2px;
|
|
right: 2px;
|
|
bottom: 8px;
|
|
width: 5px;
|
|
}
|
|
|
|
.ui-scrollbar-horizontal {
|
|
right: 8px;
|
|
bottom: 2px;
|
|
left: 2px;
|
|
height: 5px;
|
|
}
|
|
|
|
.ui-scrollbar-track {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.ui-scrollbar-thumb {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
background-color: rgba(0, 0, 0, 0.3);
|
|
-moz-border-radius: 2px;
|
|
-webkit-border-radius: 2px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.ui-scrollbar-vertical .ui-scrollbar-thumb {
|
|
width: 5px;
|
|
height: 100%;
|
|
}
|
|
|
|
.ui-scrollbar-horizontal .ui-scrollbar-thumb {
|
|
width: 100%;
|
|
height: 5px;
|
|
}
|