JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<!-- throttle -->
<textarea id="logger" rows="30" cols="30"></textarea>
<button id="clear">Clear</button>
<ul>
    <li> 1 </li><li> 1 </li><li> 1 </li><li> 1 </li><li> 1 </li>
    <li> 1 </li><li> 1 </li><li> 1 </li><li> 1 </li><li> 1 </li>
    <li> 1 </li><li> 1 </li><li> 1 </li><li> 1 </li><li> 1 </li>
      <li> 1 </li><li> 1 </li><li> 1 </li><li> 1 </li><li> 1 </li>
    <li> 1 </li><li> 1 </li><li> 1 </li><li> 1 </li><li> 1 </li>
    <li> 1 </li><li> 1 </li><li> 1 </li><li> 1 </li><li> 1 </li>
</ul>

CSS

*{
	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#logger, #clear {
    position: fixed;
    top: 10px;
}
#logger {
    left: 50px;
}
ul {
    float: right;
}
li {
    padding: 25px;
}

JavaScript

$.throttle = function (method, context){
    clearTimeout(method.timerId);
    method.timerId = setTimeout(function(){
                         method.call(context) ;     
                       }, 100);
}

$('#clear').on("click", function(){
    $("#logger").val('');
});

$(window).on("scroll", function(){
    console.log("something")
    $.throttle( function(){
        $("#logger").val($("#logger").val() + " \n :: "+$(window).scrollTop())
    },this);
});