PhoneGap中的CSS3转换:Div宽度问题

Question

我正在构建一个PhoneGap/Cordova应用程序，并有一个简单的代码来使用 http://ricostacruz.com/jquery.transit/以在单击另一个div 时显示一个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 后，我无法在设备上滚动。

我这部分是因为页面只有大约 500px 的高度（实际上没有设置任何地方），而 #hiddendiv 大约是 1500px 高度

有谁知道解决这个问题的方法吗？

Answer 1

如果你在IOS或Android上工作，为什么不在css中使用Webkit转换。如果将身体标签的高度设置为 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>

此外，它将在本机上更快（至少在iOS上），因为它使用webkit而不是jquery animate。