1

我正在使用 jQuery mobile 为 iPhone 编写一个简单的程序，我创建了一个包含许多图像的 div，但是即将到来的滚动条是我不想要的垂直的。我希望垂直空间固定并水平溢出图像。我知道有一个像 iScroll 这样的重新滚动插件，但在我的情况下，我不能使用它们，因为这些滚动插件使用<li>固定数量的元素来显示在该页面上，但我想保持这种动态，如果用户水平旋转他的设备然后更多图像可以适合屏幕，所以我想要调整，如果用户保持他的设备垂直然后水平有更少的空间，所以图像应该水平滚动，但如果他水平旋转设备，那么他会获得更多的水平空间，更多的图像可以适应，剩余的图像将再次水平滚动。

我固定了 div 的高度并尝试了溢出属性来让图像水平流动，但我猜 jQuery 正在阻止这种行为。

你能把我放在正确的道路上吗？

4

1 回答 1

0

我认为您仍然可以使用 iScroll 进行水平滚动，但是refresh只要内容尺寸发生变化，您就需要调用方法。在您的情况下，您可以收听orientationchange事件并在refresh您的 iScroll 对象的情况下执行。

检查iScroll 文档中的“掌握 refresh() 方法”部分。

希望能帮助到你！

编辑。您可以通过如下快速示例开始测试：

<div data-role="page" id="loadPage">

<div data-role="content">
    <a href="#" data-role="button" onclick="addText();">Add text</a>
     <div id="scroller" style="border: 1px solid green; white-space: nowrap; width: 300px;">
         <div id="text" style="border: 1px solid red; height: 20px; width: 0px;"></div>
     </div>
</div>

<script type="text/javascript">
    var iscrollPage = null;
    $('#loadPage').bind('pagebeforeshow', function () { 
        iscrollPage = new iScroll($('#scroller').get(0), { vScroll: false, hScroll: true });
    });

    function addText() {
        $('#text').append((new Date()).getTime()).css('width', '+=140');
        iscrollPage.refresh();
    }
</script>

</div>
于 2012-12-04T07:56:47.280 回答