72 lines
3.6 KiB
CSS
72 lines
3.6 KiB
CSS
/* The widget adds some styling that needs to be computed at run-time (min-height of scroller
|
|
* content so that pull-up will be hidden, and scroller margin transferred from wrapper padding.)
|
|
* All styles that are added staticly are added through this stylesheet, for maximum flexibility
|
|
*
|
|
* The widget adds these styles to page elements when it is constructed, and removes them when
|
|
* it is destroyed. The styling itself is added by this style sheet. So, any styles added here
|
|
* will be removed when the widget is destroyed. (For example, if you call "destroy" on the widget.)
|
|
*/
|
|
|
|
/* The iscroll-page style is added to the page when the first iscrollview widget is created
|
|
* on the page, and removed when the last iscrollview widget on the page is destroyed.
|
|
*/
|
|
.iscroll-page {
|
|
/* Add any styles that you want on pages that use iScroll */
|
|
}
|
|
|
|
/* The wrapper is the element that contains the scroller. In the most typical usage, this
|
|
* is .ui-content, but could be any element. */
|
|
.iscroll-wrapper {
|
|
min-height: 0; /* Override any min-height, for example, in case a background image is
|
|
used on ui-content div used as wrapper. */
|
|
|
|
/* The wrapper needs to be positioned relative or absolute for proper positioning of the
|
|
scrollbar with iscroll4 default styling of the scrollbar. Either relative or absolute on the
|
|
wrapper will cause the absolute positioning of the scrollbar in iScroll to be relative to
|
|
the wrapper. */
|
|
position: relative;
|
|
|
|
/* iScroll examples all show the z-index of the wrapper raised to 1 (default is 0). There may
|
|
be an issue related to touch/click that this solves on specific platforms or depending on
|
|
the ordering of elements in the HTML source if elements are fixed positioned.
|
|
This would make sure that the wrapper sees click before underlying content. '
|
|
|
|
Howver, raising the wrapper Z-index creates a serious problem on page transitions on
|
|
iPhone, so I don't use it here. */
|
|
|
|
}
|
|
|
|
/* The scroller is the element that contains the elements that are scrolled. The height of this
|
|
* element is typically longer than the wrapper. (It's the stuff that we scroll.) The widget
|
|
* creates this element for you. It wraps all of the children of the wrapper.
|
|
*/
|
|
.iscroll-scroller {
|
|
/* Add any styles that you want to add to scrollers */
|
|
}
|
|
|
|
/* The "fixed" elements are the elements that are outside of the wrapper. The widget will
|
|
* set headers and footers to this style, as well as any element that has a data-iscroll-fixed
|
|
* attribute. The widget adds-up the height of these elements when it sizes the wrapper.
|
|
*/
|
|
.iscroll-fixed {
|
|
/* One often sees headers/footers/etc. raised to a z-index of 1000 in iScroll examples. This
|
|
is probably because the scroll bar has been mis-placed, and raising the z-index of the
|
|
header/footer masks the problem. I don't do it here. */
|
|
|
|
/* Add any styles that you want to add to fixed elements */
|
|
}
|
|
|
|
/* iscroll-content is the content that is scrolled - NOT including any pull-down and pull-up
|
|
* element, and also not including a special placeholder element used when there is a pull-up.
|
|
*/
|
|
.iscroll-content {
|
|
/* Add any styles that you want to add to iscroll content */
|
|
}
|
|
|
|
|
|
/* Note on scrollbar styles: iscroll4 adds inline CSS to the scrollbar when it creates it.
|
|
It sets the z-index to 100 and positions it relative to the wrapper, at the right edge of
|
|
the wrapper. If you want to override this behaviour, set the scrollBarClass option, and then
|
|
style that class as you please */
|
|
|
|
/* See jquery.mobile.iscroll-pulldown.css for styling of pull-down and pull-up elements */ |