Przesunięcie dziecka w rodzicu, który posiada suwak.

0

Mamy sobie oto kod poniżej. Pytanie: jak zbadać przesunięcie pionowe dziecka w rodzicu, bez znajomości jak wygląda rodzic, tzn.: jak zaimplementowany on jest za pomocą CSS. Tzn. mając dziecko, to można policzyć to przesunięcie, ale za pomocą JavaScript.

<div id="rodzic" style="overflow:auto;width:100px;height:100px;">
  <div id="dziecko"  style="width:200px;height:200px;">
  <span class="link_wewnętrzny">
       <span class="'komunikat_ukryty">Oto jest komunikat 1</span>
     <a href="https://www.onet.pl">Oto jest link 1</a>
</span>
  <span class="link_wewnętrzny">
       <span class="'komunikat_ukryty">Oto jest komunikat 2</span>
     <a href="https://www.onet.pl">Oto jest link 2</a>
</span>
</div></div>

Jak zmodyfikować poniższy skrypt, aby uwzględniał, co chcemy zrobić, tzn. jak przesuwamy suwak, to komunikat też ma się przesuwać, a nie być na stałym miejscu!

function KomunikatInfo(id,komunikat,left,top,font,animation_name){
	  
	var body_wszystkie=document.getElementsByTagName('body');
	if(!body_wszystkie){return;}
	var body=body_wszystkie[0];
	if(!body){return;}
	
	var id_animation=document.getElementById('id_animation_komunikatów');
	if(id_animation){body.removeChild(id_animation);}
	var div=document.createElement('div');
	div.position="absolute";
	var left_id=id.offsetLeft;
	var top_id=id.offsetTop;
	var bodycontent = document.getElementById('bodyContent');
	if(!bodycontent){return;}
	var leftbodycontent=bodycontent.offsetLeft;
	var topbodycontent=bodycontent.offsetTop;
	div.style.left=(parseInt(leftbodycontent+left_id+left*font)).toString()+'px';
    div.style.top=(parseInt(topbodycontent+top_id+top*font)).toString()+'px';
	div.style.position="absolute";
	div.style.width="max-content";
	div.style.height="max-content"; 
	div.style.fontSize=font+'px';
	div.style.fontVariant="normal";
	div.style.fontStyle="normal";
	div.style.fontWeight="normal";
	div.style.lineHeight="1.2em";
	div.style.backgroundColor="#ffc";
	div.style.border="1px solid #db4";
	div.style.padding="4px";
	div.style.opacity="0";
	div.style.zIndex="-1";
	div.style.animationName=animation_name;
	div.style.animationDuration="5s";
	div.style.animationDelay="0s";
	div.id="id_animation_komunikatów";
	div.innerHTML=komunikat;
	div_element=body.appendChild(div);
	var widthbodycontent=bodycontent.offsetWidth;
	var id_komunikat_right=left_id+left*font+div.offsetWidth;
	var marginesRight=4;
	if(widthbodycontent<id_komunikat_right-marginesRight){
	     var roznica_offsetow=id_komunikat_right-widthbodycontent;
	  	 div_element.style.left=(parseInt(leftbodycontent+left_id+left*font-(roznica_offsetow)-marginesRight)).toString()+'px';
	 }
}
   function UsunKomunikat(){
    var body_wszystkie=document.getElementsByTagName('body');
	if(!body_wszystkie){return;}
	var body=body_wszystkie[0];
	if(!body){return;}
	var id_animation=document.getElementById('id_animation_komunikatów');
	if(id_animation){body.removeChild(id_animation);}	
  }
  function WyswietlKomunikat(){
   var klasa_link_wewnetrzny=document.getElementsByClassName('link_wewnętrzny');
	for (var i=0;i<klasa_link_wewnetrzny.length;i++){
	  var poszczegolna_klassa=klasa_link_wewnetrzny[i];
	  var komunikat_ukryty=poszczegolna_klassa.getElementsByClassName('komunikat_ukryty');
	  if(!komunikat_ukryty){return;}
	  if(komunikat_ukryty.length==0|| komunikat_ukryty.length>1){return ;}
	  var jedyny_komunikat_ukryty=komunikat_ukryty[0];
	  klasa_link_wewnetrzny[i].removeChild(jedyny_komunikat_ukryty);
	  
	  var komunikat=jedyny_komunikat_ukryty.innerHTML;
	  
	  var a_tag=poszczegolna_klassa.getElementsByTagName('a');
	  if(!a_tag){return;}
	  if(a_tag.length==0|| a_tag.length>1){return ;}
	  a_tag[0].setAttribute("onMouseOver","KomunikatInfo(this,'"+komunikat+"',0,-2,14,'link_wewnętrzny_info')");
	  a_tag[0].setAttribute("onMouseOut","UsunKomunikat()");
	  }
  }
  $(WyswietlKomunikat);

1

Nie wiem, o co pytasz. Być może chodzi ci o:
https://www.w3schools.com/JSREF/tryit.asp?filename=tryjsref_element_scrollleft

Jak zmodyfikować

Możliwe, że chodzi o:
div.style.position="fixed";

1 użytkowników online, w tym zalogowanych: 0, gości: 1