2

我正在构建一个 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 高度

有谁知道解决这个问题？

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>

而且它本身会更快（至少在 iOS 上），因为它使用 webkit 而不是 jquery animate。

于 2012-06-23T22:52:58.060 回答