Rendi un Div nidificato scorrevole per un sito mobile

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

Domanda

È possibile creare un Div nidificabile scorrevole su un sito mobile jQuery? Fondamentalmente voglio che un'intestazione e un piè di pagina fissi siano scorrevoli. Ho provato a impostare Overflow: Scroll (e ho impostato la larghezza e l'altezza del div) ma non sembra funzionare correttamente nel mio simulatore iOS. (Vorrei fare un jsfiddle ma non funziona per le cose mobili jQuery)

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

Ecco il CSS pertinente:

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

Grazie per qualsiasi luce puoi brillare su questo problema!

È stato utile?

Soluzione

Esistono molte soluzioni tra cui: IScroll, Flexscroll, JQuery Scrollview E e altre (queste che ho usato con successo).

Ho trovato Flexscroll il più semplice da configurare e sono tutti lo stesso peso del codice.

iscroll 4 -> http://cubiq.org/iscroll-4 (Assicurati di indagare sul lite versione in quanto ha un peso di codice più piccolo e fa ancora le funzioni di base)

FLEXSCROLL -> http://www.hesido.com/web.php?page=customscrollbar (Mi piace questo, lo scopo originale è quello di creare barre di scorrimento personalizzate ma supporta eventi touch per le aree scorrevoli sui dispositivi mobili)

JQuery Mobile ScrollView -> http://jquerymobile.com/test/experiments/scrollview/ (creato dal team mobile jQuery)

AGGIORNARE

Ho risposto a una serie di domande relative a Iscroll su StackOverflow, ecco un link per visualizzarle (nel caso si imbatte in problemi usando iScroll): https://stackoverflow.com/search?q=user%3A752738+%5BJQuery-mobile%5D+IsCroll&submit=Search

Altri suggerimenti

Iscroll è la tua soluzione. Controlla il suo sito web

http://cubiq.org/iscroll-4

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top