Question

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

我修复了div的高度，并尝试使用overflow属性让图像水平流动，但我猜jQuery正在阻止这种行为。

你能不能请我走上正确的道路。

Answer 1

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

查看iScroll documentation中的“掌握刷新（）方法”部分。

希望它有所帮助！

EDIT。您可以使用以下快速示例开始测试：

<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>

iPhone中的jQuery mobile中的水平滚动

1 个答案: