iScroll with jquery mobile. Cannot get iScroll to work on more than one page_问答_开发者

iScroll with jquery mobile. Cannot get iScroll to work on more than one page

开发者 https://www.devze.com 2023-04-01 15:54 出处：网络

I have a site built using jquery mobile but the static toolbars look pants. So I have implemented the iScroll plugin which looks to do exactly what I want. But I can only get the iScroll plugin to wor

Consider the following

<!DOCTYPE html>
<html>
 <head>  
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<!-- iPad/iPhone specific css below, add after your main css >
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" />        
<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />-->
<!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
<script type="text/javascript" charset="utf-8" src="js/phonegap-1.0.0.js"></script>
<link rel="stylesheet" href="css/jquery.mobile-1.0b2.min.css" />
<script src="js/jquery-1.6.2.min.js"></script>  
<script src="js/jquery.mobile-1.0b2.min.js"></script>
<script src="js/iscroll.js"></script>


<script type="text/javascript">
    var myScroll;
    function loaded() {
            myScroll = new iScroll('wrapper');
    }

    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

    /* * * * * * * *
     *
     * Use this for high compatibility (iDevice + Android)
     *
     */
    document.addEventListener('DOMContentLoaded', setTimeout(function () { loaded(); }, 200), false);
    /*
     * * * * * * * */


    /* * * * * * * *
     *
     * Use this for iDevice only
     *
     */
    //document.addEventListener('DOMContentLoaded', loaded, false);
    /*
     * * * * * * * */


    /* * * * * * * *
     *
     * Use this if nothing else works
     *
     */
    //window.addEventListener('load', setTimeout(function () { loaded(); }, 200), false);
    /*
     * * * * * * * */
</script>


</head>

 <body onload="onBodyLoad()">

<div data-role="page" data-theme="c" id="top_index" data-id="top_index">
<div id="header"><a href="http://cubiq.org/iscroll">iScroll</a></div>
<div id="wrapper">
        <div id="scroller">
                <ul id="thelist">
                        <li><a href="#page2">Page 2</a></li>
                        <li>Pretty row 2</li>
                        <li>Pretty row 3</li>
                        <li>Pretty row 4</li>
                        <li>Pretty row 5</li>
                        <li>Pretty row 6</li>
                        <li>Pretty row 7</li>
                        <li>Pretty row 8</li>
                        <li>Pretty row 9</li>
                        <li>Pretty row 10</li>
                        <li>Pretty row 11</li>
                        <li>Pretty row 12</li>
                        <li>Pretty row 13</li>
                        <li>Pretty row 14</li>
                        <li>Pretty row 15</li>
                </ul>
        </div>
</div>
<div id="footer"></div>
</div>

<div data-role="page" data-theme="c" id="page2" data-id="top_index">
<div id="header"><a href="http://cubiq.org/iscroll">iScroll</a></div>
<div id="wrapper">
        <div id="scroller">
                <ul id="thelist">
                        <li><a href="#top_index">Page 1</a></li>
                        <li>Pretty row 2</li>
                        <li>Pretty row 3</li>
                        <li>Pretty row 4</li>
                        <li>Pretty row 5</li>
                        <li>Pretty row 6</li>
                        <li>Pretty row 7</li>
                        <li>Pretty开发者_开发问答 row 8</li>
                        <li>Pretty row 9</li>
                        <li>Pretty row 10</li>
                        <li>Pretty row 11</li>
                        <li>Pretty row 12</li>
                        <li>Pretty row 13</li>
                        <li>Pretty row 14</li>
                        <li>Pretty row 15</li>
                </ul>
        </div>
</div>
<div id="footer"></div>
</div>

</body>
</html>

The first page works beautifully. The second page does not scroll at all. How can I get the scroller to work across all pages? I am really stumped on this one.

I think your problem is that you have duplicate ids in your dom. You need the scroll to apply to both elements wrapping the list.