Question

我有一个多页jquery移动应用程序（以及Phonegap）。在其中一个动态加载的页面中，我尝试使用iScroll（v5）让用户在水平和垂直方向上滚动大图像。以下是我在此页面中使用的代码：

    !DOCTYPE HTML>
<html>
<head>
    <title>Title</title>
</head>
<body>
<div id="largeimage-viewer" data-role="page" class="backdrop">
    <script type="text/javascript" charset="utf-8" src="../common/iscroll.js"></script>
    <script type="text/javascript" charset="utf-8">
        $("#largeimage-viewer").die('pageinit');
        $("#largeimage-viewer").live('pageinit', function (e)
        {
            var myscroll = new IScroll(document.getElementById('wrapper'),
            {
                scrollbars: true,
                scrollX: true
                //freeScroll: true,
                //fadeScrollbars: true
            });
            console.log("Created iScroll object: " + (myscroll != null));
        });
    </script>
    <div data-role="header">
        <a href="#" class="ui-btn-left top-btn" data-icon="back" data-rel="back">Back</a>
        <center><a href='#' data-role="button" data-inline="true" data-icon="info" data-iconpos="notext" style="margin-top:0;" onclick="$.mobile.changePage('appinfo.html', { transition: 'slide' })">CG</a></center>
    </div><!-- /header -->

    <div data-role="content" style="scrolling: scroll">
        <div id="wrapper">
            <img alt="Floor Plan" src="../common/images/floorplan.jpg" width="1217" height="1699" />
        </div>
    </div><!-- /content -->    

</div><!-- /page -->
</body>
</html>

当我在Android（4.1.2）上查看该页面时，图像显示但我无法滚动图像。也没有可见的滚动条。

任何人都可以建议我可能缺少的东西吗？感谢。

之前，我在不使用iScroll库的情况下尝试了以下操作：

    <div data-role="content" style="scrolling: scroll">
        <div style="-webkit-overflow-scrolling: touch; overflow: scroll;">
            <img alt="" src="../common/images/floorplan.jpg" />
        </div>
    </div><!-- /content -->

此代码显示垂直滚动条，滚动工作正常，但水平滚动非常慢，也没有滚动条。随着屏幕上的所有滑动，我会让图像水平移动一英寸左右！在这方面的任何解决方案也将受到赞赏。

使用jquery mobile无法正确滚动大图像

0 个答案: