[Use Html5 CfxixiJS to create an APP] How to Use iscroll to create a horizontal scrolling List Layout

The effect is as follows: it is not easy to use iscroll to implement such a layout... The front-end should have good css skills and then use js (here lz uses zeptoJS or you can use jquery) suppose we have such an html [html] <div id = "wrapperIndexActivity" class = "wrapperIndexActivity"> <div class = "scrollerActivity" id = "scrollerActivity"> <ul> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> </ul> </div> </ div> first, the ID (wrapperIndexActivity) load iscroll [javascript] var homeScroll = new iScroll ("wrapperIndexActivity", {snap: true, momentum: false, hScrollbar: false, vScrollbar: false, checkDOMChanges: true, onScrollEnd: function () {}}); attaches a style to the class to which the Id belongs: [css]. wrapperIndexActivity {width: 100%; height: 100%; position: relative; z-index: 1; overflow: hidden; display: block;} Then the ID (scrollerActivity) several screens can be switched for computing (Here we suppose there are four) [javascript] $ ("# scrollerActivity "). style ({'width': document. body. clientWidth * 4 + 'px '}); the corresponding class must have an additional style: [css] www.2cto.com. wrapperIndexActivity. scrollerActivity {height: 100%; float: left; padding: 0; overflow: hidden ;} then fill in the screen [javascript] $ ('# wrapperIndexActivity ul li') for each list item of li '). style ({'width': document. body. clientWidth + "px"}); additional class style: [css]. wrapperIndexActivity. scrollerActivity ul li {-webkit-box-sizing: border-box; display: block; height: 100%; float: left;} finally refresh iscroll [javascript] // refresh data omeScroll. refresh ();