2011-01-10 6 views
1

iScrollをiPad上で動作させることができないと思われ、数日間運がないと分かりませんでしたので、誰かが私を助けてくれるでしょう。JScery iScrollがiPad上でスクロールしない

は、私が最初のjsファイルが含まれています:

<script type="text/javascript" src="/js/iscroll.js?v3.7.1"></script> 
<script type="text/javascript" src="/js/ipad_scroller.js"></script> 

iscroll.jsがiscrollソースで以下のコードです。ここで

var deviceAgent = navigator.userAgent.toLowerCase(); 
var agentID = deviceAgent.match(/(ipad)/); 

if(agentID) { 

    var myScroll; 
    var a = 0; 
    function loaded() { 
    setHeight(); // Set the wrapper height. Not strictly needed, see setHeight() function below. 

    // Please note that the following is the only line needed by iScroll to work. Everything else here is to make this demo fancier. 
    myScroll = new iScroll('ipad_scroller', {vScrollbar:true}); 
    } 

    // Change wrapper height based on device orientation. Not strictly needed by iScroll, you may also use pure CSS techniques. 
    function setHeight() { 
    var headerH = document.getElementById('ipad_header').offsetHeight, 
    footerH = document.getElementById('ipad_footer').offsetHeight, 
    wrapperH = window.innerHeight - headerH - footerH; 
    document.getElementById('ipad_wrapper').style.height = wrapperH + 'px'; 
    } 

    // Check screen size on orientation change 
    window.addEventListener('onorientationchange' in window ? 'orientationchange' : 'resize', setHeight, false); 

    // Prevent the whole screen to scroll when dragging elements outside of the scroller (ie:header/footer). 
    // If you want to use iScroll in a portion of the screen and still be able to use the native scrolling, do *not* preventDefault on touchmove. 
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); 

    // Load iScroll when DOM content is ready. 
    document.addEventListener('DOMContentLoaded', loaded, false); 

} 

は、コード内で使用されているのdivのCSSです:

#ipad_header { 
width:100%; 
height:250px; 
} 

#ipad_footer { 
width:100%; 
height:48px; 
padding:0; 
border-top:1px solid #444; 
} 

#ipad_wrapper { 
height:100px; 
     position: relative; 
     overflow: auto; 
} 

#ipad_scroller { 
position: relative; 
     width: 100%; 
     z-index: 1; 
     overflow: hidden; 
     height: auto; 
} 

第二は、彼らが次のコードが含まれていiscrollサイト上で与える例をオフに基づいて、私が作成したカスタムJSですその後、私は持っているhtmlのページで

<div id="ipad_header">//content at the very top that I want to stay on top as it scrolls</div> 

<div id="ipad_wrapper"> 
    <div id="ipad_scroller"> 
    //The rest of my page content 
    </div> 
</div> 

<div id="ipad_footer">Footer content here</div> 

私はこれを一度に働いていたが、何らかの理由でipadで作業を停止した。奇妙なことは、私が景観モードでipadをその側面に回すと、数秒間ハングしてからiscrollのものがうまく動作することです。私はipadを再びポートレートモードに戻すと再びハングしますが、ポートレートモードでもスクロールが再び機能し始めます。誰も私にこれを助けてくれますか?私は何がうまくいかなかったかを調べるために私の髪を引っ張っています。私は最近、ipadを最新のOSバージョンにアップグレードしたことは知っていますが、私はその前にこの問題が起きていると考えています。まあそれで周りに動作するように見えた唯一の方法をいじり後

答えて

1

は、私は200pxの

0

にipad_scroller divの1800pxとipad_wrapperの高さの高さを作った場合、私は、ラッパーのdivは、zを必要とするものであると思っています-index:1はスクロールしているコンテンツではありません...スクロールするコンテンツには、指定された位置、Z-インデックス、オーバーフローまたは高さが必要とは思われません。

0

はあなたがorientationchangeにスクローラをリフレッシュする必要はないでしょうけれども

は間違っているだろうか?

setTimeout(function() { myScroll.refresh(); }, 0); 
関連する問題