JSFiddle - React, Tailwind, and code Playground

by raycn

HTML

<div class="main">
    Lorem ipsum dolor sit amet, zril qualisque ne sit. Ea movet mentitum eloquentiam sit. Natum nonumy sententiae mea ei, quo quas oratio in, aeque tritani has ut. Virtute nostrum contentiones te quo, eirmod menandri consulatu ne mea. Cu unum liberavisse eam, ad posse consectetuer consequuntur nam. At aeque pertinax hendrerit quo, laudem delectus an ius, no mea eirmod nusquam. Per ex omnesque iracundia, tamquam prodesset duo ei.

Graece putant inermis sit ei, at mea phaedrum gubergren, soleat scripta eligendi ut per. Scripta nusquam accusata mea id, eam assum adipiscing et. Clita eruditi sensibus et ius, denique offendit phaedrum in est. Abhorreant persequeris no nam, per ea facer denique referrentur. Lorem melius volumus ne mel, quot honestatis pro te, eam eu copiosae ullamcorper. Ius porro neglegentur in, solet labitur suscipit ex sit, libris persius eu sit.

Nec ad inani singulis, ridens mediocritatem ex vis, ius graeci commune ne. Eu nec augue graece eirmod, an pro vide aliquip sententiae, dicta feugait dissentias no sit. An malis maiorum est, cu aliquip denique mel. Ea duo idque partem nominati, an semper probatus adipisci per. His euismod feugait ex. Sea ex facer semper propriae, cum blandit voluptatibus cu, aliquam abhorreant vituperata ad vel.

Eam et tollit integre quaeque, magna constituto necessitatibus cu vim. Eum nulla nihil et. Duo rationibus elaboraret te, has ei numquam detracto. Cu scripta mentitum vix.

Etiam corpora apeirian vel ex. Cum soluta omittantur suscipiantur te, etiam zril solet an has, pri decore iudicabit et. Nam dicat semper consulatu ex, ex quem fastidii suscipit ius, ad legere erroribus liberavisse nam. Malis interesset deterruisset te vel. Ponderum concludaturque vim ut.
</div>

CSS

.main {
    white-space: pre;
    height: 1000px;
}

JavaScript

var event = $.event,
	scrollTimeout;

event.special.smartscroll = {
	setup: function() {
	  $(this).bind( "scroll", event.special.smartscroll.handler );
	},
	teardown: function() {
	  $(this).unbind( "scroll", event.special.smartscroll.handler );
	},
	handler: function( event, execAsap ) {
	  // Save the context
	  var context = this,
	      args = arguments;

	  // set correct event type
	  event.type = "smartscroll";

	  if (scrollTimeout) { 
          clearTimeout(scrollTimeout);
          console.log('clear'); 
      }
      console.log(execAsap);
	  scrollTimeout = setTimeout(function() {
	    $(context).trigger( 'smartscroll', args );
	  }, execAsap === "execAsap" ? 0 : 100);
	}
};

$.fn.smartscroll = function( fn ) {
	return fn ? this.bind( "smartscroll", fn ) : this.trigger( "smartscroll", ["execAsap"] );
};

$(window).smartscroll(function() {console.log('hello, world')});
$(window).smartscroll();