製作嵌套式div滾動在移動網站上

是否有可能創建一個jQuery移動網站上滾動的div嵌套？基本上我想要一個固定的頁眉和頁腳，但中間部分是可滾動的。我嘗試設置溢出：滾動（我已經設置了div的寬度和高度），但它似乎不能在我的iOS模擬器中正常工作。（我會做的jsfiddle但它不會對jQuery Mobile的東西工作）製作嵌套式div滾動在移動網站上

這裏的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; 
    }

感謝任何輕你可以照耀這個問題！

來源

2012-01-12 MillerMedia

解決方法有很多，包括：iScroll，Flexscroll，jQuery的滾動型實驗，和其他人（這些的我已經成功地使用）。

我發現Flexscroll最簡單的設置，而且都是差不多的代碼量。

iScroll 4 - >http://cubiq.org/iscroll-4（請確保您調查lite版本，因爲它有一個更小的代碼量，並仍對基本功能）

Flexscroll - >http://www.hesido.com/web.php?page=customscrollbar（我喜歡這一個，它的初衷是創建自定義的滾動條，但它支持在移動設備上滾動區）

jQuery Mobile的滾動型觸摸事件 - >http://jquerymobile.com/test/experiments/scrollview/（由jQuery Mobile的團隊創建）

UPDATE

我已經回答了一些關於StackOverflow的iScroll相關的問題，這裏是查看它們的鏈接（套內您遇到使用問題iScroll）：https://stackoverflow.com/search?q=user%3A752738+%5Bjquery-mobile%5D+iscroll&submit=search

來源

2012-01-12 18:44:05 Jasper

iScroll是您的解決方案。檢查其網站

http://cubiq.org/iscroll-4

來源

2012-01-12 18:22:11 Bernat

完美。謝謝。 – MillerMedia 2012-01-12 18:25:22

如果妳需要幫助......在這裏評論;） – Bernat 2012-01-12 18:26:16

注意，發佈的鏈接是一個老版本iScroll的，因爲它執行好新的版本應使用：http://cubiq.org/iscroll-4 – Jasper 2012-01-12 18:45:29

製作嵌套式div滾動在移動網站上

回答

相關問題