Scorri 2 contenuti DIV + contenuto principale con la barra di scorrimento principale del browser

Non riesco a capire, su come aggirare questo problema per lo spostamento di contenuto all'interno di due pagine + contenuto esterno.Scorri 2 contenuti DIV + contenuto principale con la barra di scorrimento principale del browser

devo seguente layout di:

intestazione + piè
libro
pagine con larghezza fissa e altezza.

voglio per scorrere le pagine di contenuti dalla barra di scorrimento principale senza alcuna barra di scorrimento della pagina (come Gmail comporre esempio)

Il problema principale è. il libro mostrerà dopo l'intestazione e se l'utente sta usando una risoluzione dello schermo più piccola, mostrerà la barra di scorrimento per scorrere verso il basso per vedere correttamente il libro.

Quindi abbiamo due pagine, i cui contenuti sono diversi l'uno dall'altro e ogni pagina può essere più lunga dell'altra. quindi vogliamo scorrere tutti i dati, prima di continuare a scorrere nuovamente al piè di pagina.

jsFiddle Example:http://jsfiddle.net/7vqzF/2/

Sarebbe fantastico per risolvere questo da solo css.

layout Struttura: (soluzione dovrebbe avere un solo principale barra di scorrimento del browser, per controllare le pagine e contenuti al di fuori del libro da esso.) layout structure

fonte

2013-08-07 Basit

penso rimuovere .outsideBookSpace in questa altezza classe il vostro problema risolto può essere – falguni

@Fags voglio scorrere 2 div dalla barra di scorrimento principale. non vedo come rimuovere .outsideBookSpace è la soluzione per questo. – Basit

vuoi solo la parte .book per scorrere con lo scorrimento del browser. ??? – maverickosama92

Se ho ricevuto la tua domanda giusta siete alla ricerca per l'attributo CSS fixed. Ecco alcuni HTML tra cui CSS che potrebbe fare esattamente ciò che il vostro cercando:

<html> 
    <head> 
    <style> 
     body { 
     margin-top: 150px; 
     } 

     .header { 
     width: 100%; 
     position: fixed; 
     top: 0; 
     background-color: white; 
     border-bottom: 2px solid lightblue 
     } 

     .footer { 
     width: 100%; 
     position: fixed; 
     bottom: 0; 
     background-color: white; 
     border-top: 2px solid lightblue 
     } 

     .book table td { 
     vertical-align: top; 
     } 

     .page1, .page2 { 
     border: solid 1px red; 
     width: 400px; 
     } 
    </style> 
    </head> 

    <body> 
    <div class="header"> 
     <h1>Header</h1> 
     <ul> 
     <li>home</li> 
     <li>contact us</li> 
     </ul> 
    </div> 

    <div class="book"> 

     <table> 
     <tr> 
      <td> 
      <div class="page1"> 
       <h2>Page1</h2> 
       scroll from main scrollbar<br/> 
       scroll from main scrollbar<br/> 
       scroll from main scrollbar<br/> 
       ... 
      </div> 
      </td> 
      <td> 
      <div class="page2"> 
       <h2>Page2</h2> 
       scroll from main scrollbar<br/> 
       scroll from main scrollbar<br/> 
       ... 
      </div> 
      </td> 
     </tr> 
     </table> 
    </div> 

    <div class="footer"> 
     My Footer 
    </div>  

    </body> 
</html>

Ecco uno screenshot dal mio browser che mostra quanto sopra HTML: enter image description here

I rotoli Browser-Scrollbar solo il page1/page2 <div> elemtents ma non gli elementi di intestazione e piè di pagina.

E finalmente ecco lo jsFiddle Link per la demo online.

fonte

2013-08-21 10:07:44

ecco la demo di quello che ho, per favore cambia alla pagina precedente, trascinandola dalla fine della pagina. per vedere la demo di due pagine: http://v4.globalquran.com/ come puoi vedere, non posso usare lo stile fisso su di esso. – Basit

IMHO sarebbe ancora possibile utilizzare lo stile fisso ma sarebbe più difficile da implementare. Ma a parte il problema con il bordo dell'immagine e il codice JavaScript di turnjs (che non è stato menzionato nella domanda originale), il mio esempio è quello che ti aspetti che faccia? –

Sì, ma le dimensioni di entrambe le pagine sono diverse nell'esempio fornito. le dimensioni della pagina devono essere uguali e le dimensioni di scorrimento devono/possono essere diverse e scorreranno entrambe nello stesso momento, se è necessario scorrere. anche come è possibile con i bordi di immagini e di giri. – Basit

Metti la tua parte di intestazione, che deve essere in fissa in div separata e applicare questi stili.

<div class="fix"> 
    <h1> Header</h1> 
    <menu><ul><li>home</li><li>contact us</li></ul></menu> 
    </div> 
.fix{ 
position:fixed; 
    top:0px; 
    left:0px; 
    background:#FFF; 
    width:100%; 
    border-bottom:1px solid black; 
}

per lo spazio aggiungere un altro div al fondo della testata

<div class="space"></div> 
.space{ 
width:100%; 
height:150px; 
}

Ecco il jsfiddle.

fonte

2013-08-27 10:52:51

non può farlo con effetto libro rilegato, come questo v4.globalquran.com – Basit

È possibile utilizzare il seguente approccio con puro CSS e nessuna tabella.

See online demo here.

Risultato:

Example

Ciò significa, tuttavia, che è necessario modificare la struttura del documento un po '(sto usando elementi HTML5, ma questo può essere facilmente modificato in div normali se necessario) - come si può vedere la struttura è abbastanza semplice:

<header>Header 
    <nav>Menu</nav> 
</header> 

<main> 
    <div class="page"> 
     <h3>Page 1</h3> 
     scroll from main scrollbar 
     .... 
    </div> 
    <div class="page"> 
     <h3>Page 2</h3> 
      scroll from main scrollbar 
      .... 
    </div> 
</main> 

<footer>Footer</footer>

ora è solo una questione di styling questo modo che è possibile utilizzare principale barra di scorrimento per scorrere "entrambe le" pagine. La classe essenziale in questo contesto è:

.page { 
    float:left; 
    margin:70px 10px 50px 10px; 
    border:1px solid #000; 
    width:45%; 
}

la parte importante con la classe page è che il suo margine superiore e inferiore è impostato per corrispondere intestazione e piè. Questo è ciò che rende visibili le due pagine anche se l'intestazione e il piè di pagina sono corretti.

Il resto del CSS è solo per esempio:

html, body { 
    width:100%; 
    height:100%; 
    margin:0; 
    padding:0; 
} 
header { 
    position:fixed; 
    top:0; 
    width:100%; 
    height:70px; 
    font:32px sans-serif; 
    color:#fff; 
    background:#555; 
} 
nav { 
    position:absolute; 
    bottom:0; 
    font:12px sans-serif; 
} 
footer { 
    position:fixed; 
    width:100%; 
    bottom:0; 
    height:50px; 
    background:#555; 
}

fonte

2013-08-28 07:40:00 K3N

non può farlo con effetto libro flip .. come questa demo v4.globalquran.com – Basit

@Basit libro pieghevole? La tua domanda non dice nulla sull'effetto flip book quindi IMO il post è un po 'fuorviante. Ed è possibile utilizzare trasformazioni e animazioni CSS per ottenere un effetto flip book. – K3N

sì, è stato un mio errore, non sono riuscito a spiegare correttamente la mia situazione.stiamo già utilizzando l'effetto flip book con turn4.js, ma questo scroll sta causando problemi con noi. quindi non so come aggirarlo. usando la posizione corretta, non è una soluzione per questo. – Basit

Scorri 2 contenuti DIV + contenuto principale con la barra di scorrimento principale del browser

risposta

Problemi correlati