JSFiddle - React, Tailwind, and code Playground

by marionettejs

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.radio/2.0.0/backbone.radio.min.js"></script>
<script src="https://rawgit.com/marionettejs/backbone.marionette/next/lib/backbone.marionette.js"></script>
<div id="view">
  <div id="first-region" style="height:150px; overflow-y:scroll">
  </div>
</div>

JavaScript

const { View, Region, Application } = Marionette; // import { View, Region, Application } from 'backbone.marionette';

const myApp = new Application({ region: 'body' });

const MyRegion = Region.extend({
  onShow(){
    // Scroll to the middle
    this.$el.scrollTop(this.currentView.$el.height() / 2 - this.$el.height() / 2);
  }
});

const MyView = View.extend({
  el: '#view',
  regions: {
    firstRegion: {
      el: '#first-region',
      regionClass: MyRegion
    }
  }
});

myApp.showView(new MyView());

myApp.getView().showChildView('firstRegion', new View({ 
  template: _.template(`
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vestibulum elit id diam dictum, et venenatis magna efficitur. Aenean a nisi scelerisque nulla sollicitudin blandit id in metus. Integer hendrerit aliquet pharetra. Vestibulum porta nibh eget enim vehicula congue. Nullam pulvinar blandit ligula ac aliquam. Fusce eget dignissim nunc. Cras vitae justo sed nulla mollis malesuada sit amet id enim. Nunc dui metus, feugiat eu consectetur ut, dapibus vel orci. Nunc vel dui nec odio eleifend consequat. Morbi congue a tellus quis tristique. Nunc ultricies tortor eros, in cursus odio euismod at. Donec elementum, massa in finibus fringilla, diam elit vestibulum ex, a laoreet sem neque ut sapien. Suspendisse fermentum mauris ex, ut scelerisque neque eleifend vitae.

Vestibulum semper eget eros nec finibus. Mauris porttitor ac nisl vitae pulvinar. Nunc sit amet rhoncus velit, at maximus enim. Curabitur accumsan feugiat libero a volutpat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sit amet orci sodales lacus rhoncus consequat. Aenean id tempor risus, in feugiat elit. Donec nisi risus, condimentum a odio sed, mollis facilisis eros. Integer dignissim posuere dapibus. Etiam molestie, tortor eu maximus pellentesque, libero augue cursus nunc, vel efficitur felis nisl eget dolor. Nam egestas, nunc sed interdum tincidunt, dolor velit...