JSFiddle - React, Tailwind, and code Playground

by Boba Poshtar

HTML

<div class="rel">
  <div>
    <div>
      <div>
        <div class="wrap">
          <p><span>test</span></p>
        </div>
      </div>
    </div>
  </div>
</div>

<div>
<section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae ratione maxime mollitia repudiandae itaque blanditiis quo! Eligendi, ad libero tempora voluptates sint non quam laudantium, aspernatur ipsam ullam magni, eaque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae ratione maxime mollitia repudiandae itaque blanditiis quo! Eligendi, ad libero tempora voluptates sint non quam laudantium, aspernatur ipsam ullam magni, eaque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae ratione maxime mollitia repudiandae itaque blanditiis quo! Eligendi, ad libero tempora voluptates sint non quam laudantium, aspernatur ipsam ullam magni, eaque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae ratione maxime mollitia repudiandae itaque blanditiis quo! Eligendi, ad libero tempora voluptates sint non quam laudantium, aspernatur ipsam ullam magni, eaque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae ratione maxime mollitia repudiandae itaque blanditiis quo! Eligendi, ad libero tempora voluptates sint non quam laudantium, aspernatur ipsam ullam magni, eaque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae ratione maxime mollitia repudiandae itaque blanditiis quo! Eligendi, ad libero tempora voluptates sint non quam laudantium, aspernatur ipsam ullam magni, eaque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae ratione maxime mollitia repudiandae itaque blanditiis quo! Eligendi, ad libero tempora voluptates sint non quam laudantium, aspernatur ipsam ullam magni, eaque!</section>
</div>

<p>test</p>

CSS

div {
  position: relative;
  padding: 16px 20px;
  border: 1px solid silver;
}
.rel {
  /*position: relative;*/
}
p {
  margin: 10px 0;
  padding: 5px;
  border: 5px solid silver;
}

section {
  position: relative;
  max-width: 400px;
  height: 200px;
  overflow-x: hidden;
  overflow-y: scroll;
}
span { display: inline-block;}

JavaScript

let span = document.querySelector('span');
let p = document.querySelector('p');


let spanWidth = span.clientWidth;
let spanHeight = span.clientHeight;
let spanOWidth = span.offsetWidth;
let spanOHeight = span.offsetHeight;
let pcWidth = p.clientWidth;
let pcHeight = p.clientHeight;
let poWidth = p.offsetWidth;
let poHeight = p.offsetHeight;

//console.log('span size:', spanWidth, spanHeight);
//console.log('span Offset size:', spanOWidth, spanOHeight);
//console.log('p client size:', pcWidth, pcHeight);
//console.log('p offset size:', poWidth, poHeight);

let spanLeft = span.offsetLeft;
let spanTop = span.offsetTop;
let parent = span.offsetParent;
while (parent) {
	let styles = getComputedStyle(parent);
	spanLeft += parent.offsetLeft + parseInt(styles.borderLeftWidth);
	spanTop += parent.offsetTop + parseInt(styles.borderTopWidth);
  parent = parent.offsetParent;
} 

//console.log('span position:', spanLeft, spanTop);

let section = document.querySelector('section');


console.clear();
console.log('sec cl:', section.clientWidth, section.clientHeight);
console.log('sec sc:', section.scrollWidth, section.scrollHeight);

span.onclick = function(){
	alert(section.scrollTop);
}