Scorrevole un'intera pagina Web
https://stackoverflow.com/questions/4403004
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
C'è un modo per imitare la transizione nativo e la funzionalità di "scorrimento intere pagine" come si vede su iPhone, ma all'interno di un browser web, invece?
Voglio una pagina HTML per far scorrere più e una nuova pagina HTML di prendere il suo posto dopo la pressione di un tasto.
Il pulsante non può essere costante. Quindi, come se si dovesse avere un colpo di testa costante con pulsanti che scivolavano contenuti all'interno di una scatola allora sarebbe errato. Ho bisogno di far scorrere l'intera pagina web.
Would diapositive realizzati in HTML5 essere quello che mi serve? Grazie in anticipo per qualsiasi aiuto!
Edit: Sono stato anche il pensiero riguardo alla possibilità di configurare secondo lato del DIV full-sized a fianco con uno nascosto fuori dalla pagina con "overflow: hidden" e quindi utilizzando le transizioni CSS per colpire un pulsante e poi spostare uno DIV fuori schermo e l'altro in vista, ma non ho idea di come farlo.
L'altra parte veramente difficile di questo è che i miei contenitori DIV devono essere dinamici e il 100% larghezza e l'altezza. Non posso usato dimensioni fisse.
Modifica
Con le funzioni scrollTo e localscroll sviluppati da Ariel Flesler Sono stato in grado di completare il 99% di quello che sto cercando. Tuttavia, alla fine dello sviluppo, mi ha colpito un blocco stradale enorme. Ecco un'immagine che ho la speranza aiuta a spiegare quello che sto cercando di fare:
Il mio problema è che l'area del contenuto principale è una posizione fissa con un auto di overflow-y in modo che io possa mantenere la barra di scorrimento per la DIV inbetween l'intestazione e piè di pagina. Ma il problema è che quando Io inizio l'animazione di scorrimento del mio DIV colpendo il mio tasto, l'area del contenuto fisso non si muove, e solo l'intestazione e piè di pagina mossa. Se cambio il posizionamento dell'area del contenuto principale di "relativi" tutto si muove, come lo voglio, ma perdo il posizionamento del rotolo.
Se qualcuno potesse capire questo sarò molto grato a voi!
(vorrei postare un link a quello che ho, ma non posso. E 'un lavoro riservate per una società)
Grazie in anticipo !!
Modifica Sto lavorando su esaminato tutte queste informazioni. Risponderò in un paio di giorni. Grazie a tutti per aver inserito!
Soluzione
Attualmente sto sviluppando qualcosa che può essere utile a voi. Esso utilizza il fianco a div laterali hai considerato ma ho trovato difficoltà ad usare larghezza di 100% a causa di problemi con le barre di scorrimento e le differenze nei browser. Ho superare questo impostando la larghezza in javascript (jQuery), che offre una soluzione cross-browser (testato in IE7, IE8, FF, Chrome, Safari, Opera).
Sentitevi liberi di prendere come gran parte del codice sorgente come ti piace controllando la fonte e se hai bisogno di parlare con voi attraverso qualsiasi cosa, fammelo sapere.
http://madesignuk.com/uploader/
PS Io non sono sicuro al 100% sulle regole riguardanti la pubblicazione del link al mio sito personale in modo se si tratta di un problema per i moderatori, per favore fatemelo sapere.
PPS Il sito è in fase di sviluppo quindi per favore cercate di non prendere in giro me: p
Altri suggerimenti
È possibile farlo mettendo elementi affiancati all'interno di un contenitore con overflow:hidden, e basta spostare gli elementi interni.
Ecco una prova di concetto. Essa non gestisce il ridimensionamento della pagina dopo che è caricato, ma almeno mostra il principio. Ho messo tre diapositive nel contenitore, ma il codice è dinamico in modo che è possibile inserire un qualsiasi numero che ti piace.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Page Slide</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var w = $(window).width();
var h = $(window).height();
var slides = $('.Slides > div');
$('.SlideContainer').css({ height: (h-60) + 'px' });
$('.Slides').css({ width: slides.length + '00%' });
slides.css({ width: w + 'px' });
var pos = 0;
$('.Left').click(function(){
pos--;
$('.Slides').animate({ left: (pos * w) + 'px' });
});
$('.Right').click(function(){
pos++;
$('.Slides').animate({ left: (pos * w) + 'px' });
});
});
</script>
<style type="text/css">
body { margin: 0; padding: 0; }
.Header { position: absolute; left: 0; top: 0; width: 100%; height: 30px; line-height: 30px; text-align: center; background: #000; color: #fff; }
.Footer { position: absolute; left: 0; bottom: 0; width: 100%; height: 30px; line-height: 30px; text-align: center; background: #000; color: #fff; }
.SlideContainer { position: absolute; left: 0; top: 30px; width: 100%; overflow: hidden; }
.Slides { position: absolute; left: 0; top: 0; height: 100%; }
.Slides > div { float: left; height: 100%; overflow: scroll; }
.Slides .Content { margin-top: 100px; text-align: center; }
.Slides .Content a { font-size: 30px; }
</style>
</head>
<body>
<div class="Header">
absolutely positioned header
</div>
<div class="SlideContainer">
<div class="Slides">
<div class="Slide">
<div class="Content">
<h1>Slide 1</h1>
<a href="#" class="Left">«</a>
</div>
</div>
<div class="Slide">
<div class="Content">
<h1>Slide 2</h1>
<a href="#" class="Left">«</a>
<a href="#" class="Right">»</a>
</div>
</div>
<div class="Slide">
<div class="Content">
<h1>Slide 3</h1>
<a href="#" class="Right">»</a>
</div>
</div>
</div>
</div>
<div class="Footer">
absolutely positioned footer
</div>
</body>
</html>
Modifica
Ora jsfiddle è di nuovo, in modo da poter provare qui: jsfiddle.net/9VttC
Hai guardato LocalScroll ? Si farà tutti i link hash scorrevole all'interno del contenitore si definisce. Si dovrà impostare la larghezza di diapositive, però, come avrete bisogno di galleggiare loro.
Usa l'attributo CSS scrollTop: si vuole scorrere verso il basso 100px nella vostra zona contenuto principale?
Basta farlo:
var newScrollTop = document.getElementById("main_content_area").scrollTop + 100;
$("#main_content_area").animate({scrollTop: newScrollTop}, 500);
La seconda linea si compone con jQuery, ma basta ricordare il principio:. Influisce sul nuovo valore scrollTop al CSS tua main_content_area di div
Prova plugin per jQuery Cycle.
http://jquery.malsup.com/cycle/
Essi hanno fornito sacco di codice di esempio e tutorial, quindi è facile per voi per costruire a modo tuo.
Se ho capito bene, il metodo funziona scrollTo, ma solo se si cambia la posizione: fissa alla posizione:? Relativa, che ha la conseguenza di rendere il tratto di scorrimento al di là del div scorrimento
Non sarebbe più facile mettere un div involucro intorno alla vostra zona contenuto principale con un margine superiore al conto per l'intestazione e un margine inferiore al conto per il piè di pagina, e impostarlo per avere overflow: scroll, e per l'uso la funzione scrollTo al suo interno?
Il team di Google Chrome ha fatto 20 cose che ho imparato sui browser e la web che ha questo effetto.
Proprio come un esempio teorico, ma vorrei creare pagine HTML statiche e utilizzare jQuery per caricare i contenuti da loro (per garantire la compatibilità). Il problema principale sarebbe lo scorrimento.
Io uso jQuery per calcolare la larghezza del browser, set che per essere la larghezza della <body>, e quindi impostare overflow: hidden. Poi, basta creare una casella contenuto posizionato in modo assoluto, e far scorrere entrambi contemporaneamente.
vi posterò qualche codice in seguito, ma questo è quello che vorrei cominciare (io, essendo un violinista pateticamente incompetente JS).
Si potrebbe usare qualcosa come Coda Slider , e hanno il contenuto della diapositiva essere l'intera pagina.
pageSlide è un altra alternativa.
