scroll bar e posizione di un elemento

**pippoa@** · 23-09-2008, 16:31

ciao ragazzi sono nuovo del forum avrei bisogno di un vostro aiuto!!ho un div scrollabile con dentro una tabella con quaranta text area.vorrei sapere come posso fare per conoscere la posizione effettiva di ogni campo text che vorrei variasse al variare della scrollbar.in pratica se mi posiziono sul primo campo text e faccio un po di scroll lo stesso campo deve variare la posizione vi mando il codice che così com'è non funziona nel modo corretto.aspetto risposta ciao a tutti!!!

**pippoa@** · 24-09-2008, 15:12

up

**pippoa@** · 24-09-2008, 15:12

non c'è nessuno che mi può aiutare?

**pippoa@** · 24-09-2008, 15:26

ciao ragazzi avrei bisogno del vostro aiuto!!! ho un div con una scrollbar e all'interno c'è una tabella con quaranta campi text.vorrei sapere come faccio a sapere la posizone effettiva di uno di questi campi che (le coordinate)varia al movimento della scrollbar.in pratica schiacciando un tasto mi dovrebbe comparire l'alert che mi dice di quanto ho scrollato uno dei campi text.aspetto con ansia una risposta!!!

vi posto il codice che non funziona correttamente!!

<html>
<head>
<title>tabella</title>

<SCRIPT type="text/javascript">

function provaX(){
var vDoc=(document.documentElement && document.documentElement.clientWidth)?document.doc umentElement:document.body;
var scrX=(window.scrollX)?window.scrollX:vDoc.scrollLe ft;
var scrY=(window.scrollY)?window.scrollY:vDoc.scrollTo p;
alert(scrX);
}

function provaY(){
var vDoc=(document.documentElement && document.documentElement.clientWidth)?document.doc umentElement:document.body;
var scrX=(window.scrollX)?window.scrollX:vDoc.scrollLe ft;
var scrY=(window.scrollY)?window.scrollY:vDoc.scrollTo p;
alert(scrY);
}

function getPosX(obj) {
var curleft = 0;
if (obj.offsetParent) {
while (obj.offsetParent) {
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
alert(curleft);
return curleft;
}

function getPosY(obj) {
var curtop = 0;
if (obj.offsetParent) {
while (obj.offsetParent) {
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
alert(curtop);
return curtop;
}

function saluta() {

txtUno=document.uno.txtUno.value;
txtQuattro=document.uno.txtQuattro.value;

alert("HAI SCRITTO="+" "+txtQuattro);
}
</script>

</head>
<body>
<form name="uno" action="">
<center><div id="pippo" style="width:450px;height:80px; overflow-x:scroll; overflow-y:scroll;border:1px solid black;">

<table cellpadding="4" cellspacing="1" width="120%" border=0>
<tr>
<td width=20%><input type="text" id="txtuno">
</td>
</tr>
<tr>
<td width=20%><input type="text" name="txtuno">
</td>
</tr>

<tr>
<td width=20%><input type="text" name="txtuno">
</td>
</tr>

<tr>
<td width=20%><input type="text" id="txtuno">
</td>
</tr>
</div>
<tr>
<td width=20%><input type="text" name="5">
</td>
</tr>

<tr>
<td width=20%><input type="text" name="6">
</td>
</tr>

<tr>
<td width=20%><input type="text" name="7">
</td>
</tr>

<tr>
<td width=20%><input type="text" name="8">
</td>
</tr>

<tr>
<td width=20%><input type="text" name="9">
</td>
</tr>

<tr>
<td width=20%><input type="text" name="10">
</td>
</tr>

<tr>
<td width=20%><input type="text" name="11">
</td>
</tr>

<tr>
<td width=20%><input type="text" name="12">
</td>
</tr>

<tr>
<td width=20%><input type="text" name="13">
</td>
</tr>

<tr>
<td width=20%><input type="text" name="14">
</td>
</tr>

<tr>
<td width=20%><input type="text" name="15">
</td>
</tr>

<tr>
<td width=20%><input type="text" name="16">
</td>
</tr>

<tr>
<td width=20%><input type="text" name="17">
</td>
</tr>

<tr>
<td width=20%><input type="text" name="18">
</td>
</tr>

<tr>
<td width=20%><input type="text" name="19">
</td>
</tr>

<tr>
<td width=20%><input type="text" name="20">
</td>
</tr>

<tr>
<td width=20%><input type="text" name="21">
</td>
</tr>

<tr>
<td width=20%><input type="text" name="22">
</td>
</tr>

<tr>
<td width=20%><input type="text" name="23">
</td>
</tr>

<tr>
<td width=20%><input type="text" name="24">
</td>
</tr>

<tr>
<td width=20%><input type="text" name="25">
</td>
</tr>

<tr>
<td width=20%><input type="text" name="26">
</td>
</tr>

<tr>
<td width=20%><input type="text" name="27">
</td>
</tr>

<tr>
<td width=20%><input type="text" name="28">
</td>
</tr>

<tr>
<td width=20%><input type="text" name="29">
</td>
</tr>

<tr>
<td width=20%><input type="text" name="30">
</td>
</tr>

<tr>
<td width=20%><input type="text" name="31">
</td>
</tr>

<tr>
<td width=20%><input type="text" name="32">
</td>
</tr>

<tr>
<td width=20%><input type="text" name="33">
</td>
</tr>

<tr>
<td width=20%><input type="text" name="34">
</td>
</tr>

<tr>
<td width=20%><input type="text" name="35">
</td>
</tr>

<tr>
<td width=20%><input type="text" name="36">
</td>
</tr>

<tr>
<td width=20%><input type="text" name="37">
</td>
</tr>

<tr>
<td width=20%><input type="text" name="38">
</td>
</tr>

<tr>
<td width=20%><input type="text" name="39">
</td>
</tr>

<tr>
<td width=20%><input type="text" name="40">
</td>
</tr>
</table>
</center>
</form>

</div>
<center>
<form action="">

<htmlelement id="txtuno" name="" onscroll="prova();">

<input type="button" value="txtuno" onclick="javascript:getPosX(document.getElementByI d('txtuno'));javascript:getPosY(document.getElemen tById('txtuno'));" >
<input type="button" value="txtuno" onclick="javascript:getPosX(document.getElementByI d('txtuno'));javascript:getPosY(document.getElemen tById('txtuno'));" >
<input type="button" value="txtuno" onclick="javascript

rovaX(document.getElementById('txtquattro'));javas cript

rovaY(document.getElementById('txtquattro'));" >

</form>
</center>

</body>
</html>

**pippoa@** · 25-09-2008, 14:04

up

**Xinod** · 25-09-2008, 15:28

ma il fine e' di scrollare il contenitore tanto da mostrare l' input text relativo?

allora ti bastarebbe questo

codice:

function getCoords(el){
	var c={x: 0, y: 0};
	while (el) {
		c.x+=el.offsetLeft;
		c.y+=el.offsetTop;
		el=el.offsetParent;
	}
	return c;
}


function scrollaFinoA(id_el){
	var el=document.getElementById(id_el);
	var contenitore=document.getElementById('pippo');
	var cCn=getCoords(contenitore);
	var cEl=getCoords(el);
	var diffY=cEl.y-cCn.y;
	contenitore.scrollTop=diffY;
}

codice:

<td width=20%>1<input type="text" id="txtuno">
...
<td width=20%>4<input type="text" id="txtquattro">
...
<td width=20%>35<input type="text" id="txttrentacinque">

codice:

<input type="button" value="txtuno" onclick="scrollaFinoA('txtuno')">
<input type="button" value="txtquattro" onclick="scrollaFinoA('txtquattro')" >
<input type="button" value="txttrentacinque" onclick="scrollaFinoA('txttrentacinque')" >

ciao

**pippoa@** · 25-09-2008, 16:02

no in pratica se schiaccio un pulsante deve uscire un alert con le coordinate del campo text e se scrollo e schiaccio il pulsante deve comparirmi un alert sempre con le coordinate ma cambiate perchè ho fatto lo scroll quindi il campo text non è più nella posizione di prima dopo aver fatto la scroll!!!spero di essere stato chiaro adesso!!!aspetto con ansia una risposta.grazie

**Xinod** · 25-09-2008, 16:30

vabbe', sono calcoli che puoi mettere insieme anche da solo

la quantita' di pixel scrollata sara' in
var contenitore=document.getElementById('pippo');
alert(contenitore.scrollTop);

ciao

**pippoa@** · 25-09-2008, 17:15

grazie tanto adesso funziona però mi da la posizione di quanto scrolla il div e se io volessi sapere di quanto scrolla uno dei campi text???aspetto notizie grazie mille!!

**pippoa@** · 02-10-2008, 14:12

Discussione: scroll bar e posizione di un elemento

Strumenti discussione

Ricerca discussione

Visualizza

scroll bar e posizione di un elemento

trovare le coordinate di un elemento in una scrollbar

posizione di un elemento in una scrollbar

Permessi di invio