Response title
This is preview!
Scrollview For JQuery Mobile
in Developing jQuery Mobile
•
10 years ago
Hi,
From past few days i was trying to use scrollview in one of my project. But there is no official scrollview support is available from JQuery Mobile. I came to know about iscroll-4 (www.cubiq.com). Its quite good. they provides scollview, pull to refresh and other usefull functionality. But use of only iscroll.js is not enough to get good scrollview.
I have some trick that works fine.
From past few days i was trying to use scrollview in one of my project. But there is no official scrollview support is available from JQuery Mobile. I came to know about iscroll-4 (www.cubiq.com). Its quite good. they provides scollview, pull to refresh and other usefull functionality. But use of only iscroll.js is not enough to get good scrollview.
I have some trick that works fine.
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
- <style>
- #wrapper {
- position:absolute;
- z-index:1;
- top:45px;
- bottom:48px;
- left:0;
- width:100%;
- background:#aaa;
- overflow:auto;
- }
- #scroller {
- position:absolute;
- z-index:1;
- -webkit-tap-highlight-color:rgba(0,0,0,0);
- width:100%;
- padding:0;
- }
- </style>
- <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
- <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
- <script src="./jquery.easing.1.3.js"></script>
- <script src="./jquery.mobile.scrollview.js"></script>
- <script src="./scrollview.js"></script>
- <script src="./iscroll.js"></script>
- <script>
- var myScroll;
- function loaded() {
- myScroll = new iScroll('wrapper');
- }
- document.addEventListener('DOMContentLoaded', loaded, false);
- </script>
- </head>
- <body>
- <!-- header -->
- <div data-role="content" data-scroll="false>
- <div id="wrapper">
- <div id="scroller">
- <!-- This content will scroll -->
- </div>
- </div>
- </div>
- <!-- footer -->
- </body>
- </html>
1
