Question

我正在使用 jquerymobile in phonegap 构建应用。我正在使用他的代码来使用 iscroll.js 来实现固定的页眉，页脚，可滚动内容。问题是我无法滚动内容div。请帮助我。

 enter code here<body onload="loaded()">
<div data-role="page"  id="detail">
    <div class="fixedHeader">
        </div>
         <div id="wrapper" >
              <div id="scroll-content">
        <div data-role="content">
         <!--    dynamic content goes here  -->
        dynamic content goes here
     </div> 
     </div>
    </div>
    <div class="fixedFooter" ></div>
</div>

#wrapper {
    position:absolute; z-index:1;
    top:45px; bottom:48px; left:0;
    width:100%;

    overflow:auto;
}
#scroller {
    position:relative;
/*  -webkit-touch-callout:none;*/

    float:left;
    width:100%;
    padding:0;
}

Javascript代码

var myScroll;
function loaded() {

    myScroll = new iScroll('wrapper', {

onBeforeScrollStart: function (e) {
var target = e.target;
while (target.nodeType != 1) target = target.parentNode;

if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA')
e.preventDefault();
}
});
}

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

Answer 1

i got iscroll working in jquerymobile by editing js as 

    var myScroll = [];

    $(document).delegate('[data-role="page"]', 'pageshow', function () {

        var $page = $(this);

        // setup iScroll
        $($page.find('#wrapper')).each(function(index) {

            var scroller_id = $(this).get(0);

            myScroll.push(
                new iScroll(scroller_id, {

               useTransform: false,
              onBeforeScrollStart: function (e) {
var target = e.target;
while (target.nodeType != 1) target = target.parentNode;

if (target.tagName != 'SELECT'&& target.tagName !='option'&& target.tagName !='option' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA')
e.preventDefault();
e.stopPropagation();
}

            }));
    });

});

$(document).delegate('[data-role="page"]', 'pagehide', function () {

    // unset and delete iScroll
    for (x in myScroll)
    {
        myScroll[x].destroy();
        myScroll[x] = null;
        myScroll.splice(x, 1);
    }

});

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

使用iscroll和jquerymobile

1 个答案: