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转换。如果将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>

它本身也会更快（至少在iOS上）因为它使用webkit而不是jquery动画。

PhoneGap中的CSS3过渡：Div宽度问题

1 个答案: