JSFiddle - React, Tailwind, and code Playground

by Juri Rudi

HTML

<div id="main">


<h2>scrollLeft</h2>
<div id="scrollLeft" style="border:1px solid black;width:120px;height:130px;overflow:auto">
SCROLL ORIZONTALE: precipitevolissimevolmenteprecipitevolissimevolmente</div>
<p>Posizione: <span id="scrollLeft_pos"></span></p>
<button id="scrollLeft_set">SET e GET scrollbar</button>

<h2>scrollTop</h2>
<div id="scrollTop" style="border:1px solid black;width:120px;height:130px;overflow:auto">
SCROLL VERTICALE: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id ultricies metus, vulputate varius metus. Sed mattis maximus augue ut dapibus. Suspendisse luctus sollicitudin tincidunt. Phasellus non eros congue, pharetra quam ac, semper arcu. Maecenas est nisi, sodales ac mattis non, venenatis id ipsum. 
</div>
<p>Posizione: <span id="scrollTop_pos"></span></p>
<button id="scrollTop_set">SET e GET scrollbar</button>

JavaScript

// scrollLeft
$("button#scrollLeft_set").click(function(){
	// get posizione attuale
	var get = $("div#scrollLeft").scrollLeft();
	// la modifica
	get += 20;
	// set posizione
	$("div#scrollLeft").scrollLeft(get);
	// la scrive nello span
	$("span#scrollLeft_pos").text(get);
});

// scrollTop
$("button#scrollTop_set").click(function(){
	// get posizione attuale
	var get = $("div#scrollTop").scrollTop();
	// la modifica
	get += 20;
	// set posizione
	$("div#scrollTop").scrollTop(get);
	// la scrive nello span
	$("span#scrollTop_pos").text(get);
});