Css 使移动站点的嵌套Div可滚动_Css_Html_Jquery Mobile_Scrollable

Css 使移动站点的嵌套Div可滚动

css html jquery-mobile

Css 使移动站点的嵌套Div可滚动,css,html,jquery-mobile,scrollable,Css,Html,Jquery Mobile,Scrollable,是否可以在jQuery移动站点上创建可滚动的嵌套div？基本上我想要一个固定的页眉和页脚，但中间部分是可滚动的。我试着设置overflow:scroll（我已经设置了div的宽度和高度），但在我的iOS模拟器中它似乎不能正常工作。（我会使用JSFIDLE，但它不适用于jQuery移动设备）以下是HTML： <body> <div data-role="page"> <div data-role="header"> <div id="hea

是否可以在jQuery移动站点上创建可滚动的嵌套div？基本上我想要一个固定的页眉和页脚，但中间部分是可滚动的。我试着设置overflow:scroll（我已经设置了div的宽度和高度），但在我的iOS模拟器中它似乎不能正常工作。（我会使用JSFIDLE，但它不适用于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 -->

谢谢你对这个问题的关注

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

有很多解决方案，包括：iScroll、Flexscroll、jQuery scrollview实验和其他解决方案（我已经成功使用了这些解决方案）

我发现Flexscroll是最容易设置的，它们的代码重量都差不多

iScroll 4->（请确保您调查

lite

版本，因为它的代码重量较小，并且仍然执行基本功能）

Flexscroll->（我喜欢这个，它最初的目的是创建自定义滚动条，但它支持移动设备上可滚动区域的触摸事件）

jQuery Mobile Scrollview->（由jQuery移动团队创建）

更新

我已经回答了有关StackOverflow的许多与iScroll相关的问题，下面是查看这些问题的链接（如果您在使用iScroll时遇到问题）：

如果您需要帮助。。。请在此评论；）请注意，发布的链接指向旧版本的iScroll。应使用新版本，因为它性能更好：+1。好建议。这似乎是一个非常流行的脚本。iscroll-4链接已失效iscroll-4链接已失效

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