Making A Nested Div Scrollable For A Mobile Site

StackOverflow https://stackoverflow.com/questions/8840200

문제

Is it possible to create a scrollable nested div on a jQuery mobile site? Basically I want a fixed header and footer but the middle section to be scrollable. I tried setting overflow:scroll (and I've set the width and height of the div) but it doesn't seem to work correctly in my iOS simulator. (I would do a jsFiddle but it doesn't work for the jQuery mobile stuff)

Here's the 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 -->

Here's the relevant CSS:

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

Thanks for any light you can shine on this problem!

도움이 되었습니까?

해결책

There are many solutions including: iScroll, Flexscroll, jQuery scrollview experiment, and others (these ones I have used successfully).

I found Flexscroll the easiest to setup and they are all about the same code-weight.

iScroll 4 -> http://cubiq.org/iscroll-4 (Make sure you investigate the lite version as it has a smaller code-weight and still does the basic functions)

Flexscroll -> http://www.hesido.com/web.php?page=customscrollbar (I like this one, it's original purpose is to create custom scrollbars but it supports touch events for scrollable areas on mobile devices)

jQuery Mobile Scrollview -> http://jquerymobile.com/test/experiments/scrollview/ (created by the jQuery Mobile team)

UPDATE

I've answered a number of iScroll related questions on StackOverflow, here is a link to view them (in-case you run into problems using iScroll): https://stackoverflow.com/search?q=user%3A752738+%5Bjquery-mobile%5D+iscroll&submit=search

다른 팁

iScroll is your solution. Check its website

http://cubiq.org/iscroll-4

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top