Question

是否可以在jQuery移动网站上创建可滚动的嵌套div？基本上我想要一个固定的页眉和页脚，但中间部分是可滚动的。我尝试设置溢出：滚动（我已经设置了div的宽度和高度），但它似乎在我的iOS模拟器中无法正常工作。（我会做一个jsFiddle，但它不适用于jQuery移动设备）

这是HTML：

<body> 
<div data-role="page">
   <div data-role="header">
   <div id="header_image">
      <img src="images/top_logo.png" />
   </div>
   </div><!-- /header -->
       <div id="content_bg">
       <div data-role="content">
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </div><!-- /content -->
   </div><!-- /content_bg -->
   <div data-role="footer" data-theme="b">
   <div id="footer_text">
      <center><h4>Page Footer</h4></center>
   </div><!-- /footer_text -->
   </div><!-- /footer -->
   </div><!-- /page -->

这是相关的CSS：

#content_bg{
    background-color:#0038a5;
    height:310px;
    width:100%;
    text-size:11px;
    color:white;
    overflow: scroll;
    }

感谢你能解决这个问题！

Answer 1

有许多解决方案，包括：iScroll，Flexscroll，jQuery scrollview实验，以及其他（我成功使用的这些）。

我发现Flexscroll最容易设置，它们的代码权重相同。

iScroll 4 - ＆gt; http://cubiq.org/iscroll-4（确保您调查lite版本，因为它具有较小的代码权重并仍然执行基本功能）

Flexscroll - ＆gt; http://www.hesido.com/web.php?page=customscrollbar（我喜欢这个，它的最初目的是创建自定义滚动条，但它支持移动设备上可滚动区域的触摸事件）

jQuery Mobile Scrollview - ＆gt; http://jquerymobile.com/test/experiments/scrollview/（由jQuery Mobile团队创建）

<强>更新

我已经在StackOverflow上回答了许多与iScroll相关的问题，这是一个查看它们的链接（如果您使用iScroll遇到问题）：https://stackoverflow.com/search?q=user%3A752738+%5Bjquery-mobile%5D+iscroll&submit=search

Answer 2

iScroll是您的解决方案。查看其网站

http://cubiq.org/iscroll-4

为移动站点制作嵌套Div可滚动

2 个答案: