JQueryMobile + iscroll implementation list scroll bar

During the development process, if the ul or ol list contains too many contents and the height is greater than the height of the outer div, JQueryMobile will automatically add a scroll effect. However, when using JQueryMobilePanels, I found that when ul or ol is added to the content area, the Header and Footer can be fixed when the list contains more data,

During the development process, if the ul or ol list contains too many contents and the height is greater than the height of the outer div, JQueryMobile will automatically add a scroll effect. However, when using JQuery MobilePanels, I found that when ul or ol is added to the content area, the Header and Footer can be fixed when there are too many data items in the list to scroll, but the RevelPanel will scroll.

Imagine: No matter where the content area list is scrolling, the Header, Foote, and RevelPanel are fixed, so the solution is to generate a scroll bar for the content area, the list will only scroll in this area.

After searching, we found that there are two plug-ins that can achieve this effect. One is the jqueryscroll rolling plug-in-jquery-nicescroll, and the other is the iscroll. Iscroll is used because iscroll information is easier to obtain on the network.

JQuery panlepanels documentation and routine address: http://view.jquerymobile.com/1.3.0/docs/widgets/panels/

IScroll Official Website: http://cubiq.org/iscroll

Usage:

1. source code of the page list:

• ...

Here, there must be two div wrapping lists, which will be used as the scroll bar to appear in the area.

2. Page css style:

# Wrapper {
Padding: 20px;
Position: absolute;
Z-index: 1;
Top: 100px;
Bottom: 60px;
Left: 20px;
Right: 20px;
Width: 80%;
Overflow: auto;
}
# Scroller {
Position: absolute;
Z-index: 1;
-Webkit-tap-highlight-color: rgba (0, 0, 0, 0 );
Width: 100%;
Padding: 0;
}

3. JavaScript:

Document. addEventListener ('deviceready', function (){
Var myScroll = new iScroll ('wrapper ',{
Snap: 'lil ',
Momentum: false,
HScrollbar: false,
VScrollbar: false
});
}, True );
Because it is used on mobile devices and does not want the scroll bar to occupy space, you can hide it.

Page effect: