Ciao, buon anno a te.
Ho fatto qualche prova.
Non so dirti come sono arrivato al risultato.. è tardi e ora mi butto a letto.. per cui ti posto semplicemente l'esempio funzionante che ho fatto.
Se hai dubbi, chiedi.
codice:
<!DOCTYPE HTML>
<html>
<head>
<title>Esempio</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style type="text/css">
#tastiera{
width:100%;
height:300px;
position:fixed;
bottom:0;
background:rgba(80,80,80,.8);
}
body{
padding-bottom:300px;
}
</style>
<script type="text/javascript">
$(function(){
var $elementi = $("input"); // collection degli elementi su cui eseguire lo scroll
var delayscroll; // delay di attivazione dello scroll dopo il resize
$elementi.focus(scrolla); // al focus su uno degli elementi, eseguo lo scroll
$(window).resize(function(){ // al resize della finestra
clearTimeout(delayscroll) // azzero e
delayscroll = setTimeout(function(){ // riattivo il delay
$elementi.filter(":focus").length && scrolla(); // se uno degli elementi ha il focus, eseguo lo scroll
},300) // tempo del delay
})
function scrolla(){ // funzione scroll
var $campoattivo = $elementi.filter(":focus"); // il campo attivo
var $tastiera = $("#tastiera"); // l'elemento tastiera
$('html, body').stop().animate( // avvio l'animazione
{
'scrollTop':
$campoattivo.offset().top // posizione del campo rispetto al documento
+$campoattivo.height()+10 // altezza del campo + un valore X di scostamento
-$tastiera.position().top // posizione della tastiera rispetto alla finestra (sostanzialmente)
}
, 300 // durata animazione
);
}
})
</script>
</head>
<body>
1<input>
<br><br><br><br>
2<input>
<br><br><br><br><br><br><br>
3<input>
<br><br><br><br><br>
4<input>
<br><br><br><br><br><br><br>
5<input>
<br><br><br><br><br><br>
6<input>
<br><br><br><br><br><br><br>
7<input>
<div id="tastiera">TASTIERA</div>
</body>
</html>
Rispondi quotando
