2

私はPhoneGap/Cordovaアプリを構築しており、 別のdivがクリックされたときにhttp://ricostacruz.com/jquery.transit/を使用してdivを表示する簡単なコードを持っています。

<style>
#hiddendiv {
    top: -2000px;
    position:absolute;
}
</style>

<script>
$('#clickme').click(
            function() {
            //SHOW DIV
            $('#hiddendiv').transition({ y: '2100px' });
            });
</script>

<!--HTML-->
<div id="hiddendiv">
Lorem Ipsum blah blah blah Loooong piece of text
</div>

<div id="clickme">
Click Me
</div>

そして、それはうまくいきます。問題は、#hiddendiv が表示されるとデバイスをスクロールできないことです。

これは、#hiddendiv の高さが約 1500 ピクセルであるのに対し、ページの高さが約 500 ピクセルしかない (実際にはどこにも設定されていない) ためです。

これに対する回避策を知っている人はいますか？

4

1 に答える 1

6

IOS または Android で作業している場合は、css で Webkit トランジションを使用しないでください。bodyタグの高さを100%にしたら？

<style>
body {
height: 100%
}

#hiddendiv {
-webkit-transform: translate(0, -2000px);
-webkit-transition: all ease-in 3s;
}
</style>

<script>
   $('#clickme').click(
            function() {
            //SHOW DIV
            $('#hiddendiv').css('-webkit-transform','translate(0, 2100px)');
            });
   </script>

また、jquery animate ではなく webkit を使用するため、(少なくとも iOS では) ネイティブに高速になります。

于 2012-06-23T22:52:58.060 に答える