JSFiddle - React, Tailwind, and code Playground

by Volker_E

HTML

<!--<div id="main">-->    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium tempore laboriosam odio placeat corporis vitae explicabo repellat officiis hic nobis sed quia repudiandae fugit. Sint aut rerum aliquid consectetur facere!<br />
    Ipsum dolor sit amet, consectetur adipisicing elit. Praesentium tempore laboriosam odio placeat corporis vitae explicabo repellat officiis hic nobis sed quia repudiandae fugit. Sint aut rerum aliquid consectetur facere!    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium tempore laboriosam odio placeat corporis vitae explicabo repellat officiis hic nobis sed quia repudiandae fugit. Sint aut rerum aliquid consectetur facere!<br />
    Ipsum dolor sit amet, consectetur adipisicing elit. Praesentium tempore laboriosam odio placeat corporis vitae explicabo repellat officiis hic nobis sed quia repudiandae fugit. Sint aut rerum aliquid consectetur facere!    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium tempore laboriosam odio placeat corporis vitae explicabo repellat officiis hic nobis sed quia repudiandae fugit. Sint aut rerum aliquid consectetur facere!<br />
    Ipsum dolor sit amet, consectetur adipisicing elit. Praesentium tempore laboriosam odio placeat corporis vitae explicabo repellat officiis hic nobis sed quia repudiandae fugit. Sint aut rerum aliquid consectetur facere!    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium tempore laboriosam odio placeat corporis vitae explicabo repellat officiis hic nobis sed quia repudiandae fugit. Sint aut rerum aliquid consectetur facere!<br />
    Ipsum dolor sit amet, consectetur adipisicing elit. Praesentium tempore laboriosam odio placeat corporis vitae explicabo repellat officiis hic nobis sed quia repudiandae fugit. Sint aut rerum aliquid consectetur facere!    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium tempore laboriosam odio placeat corporis vitae explicabo repellat...

CSS

</style>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
/* IMPORTANT STYLES FOR SOLUTION */
body {
    position: fixed;
}
.reallyimportantselector {
    overflow-y: scroll;
}

/* just for styling */
body {
    background: #F2C48D;
    margin: 2em;
    font-family: Calibri, Arial, Helvetica, sans-serif;
}
#not-main {
    background: #67BFAD;
    color: #FFF;
	position: absolute;
	top: 25px;
	left: 250px;
	width: 180px;
    height: 280px;
    /*margin: 0 auto;*/
    padding: 10px;
}

JavaScript

/*
// lock scroll position, but retain settings for later
      var scrollPosition = [
        self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
        self.pageYOffset || document.documentElement.scrollTop  || document.body.scrollTop
      ];
      var html = jQuery('html'); // it would make more sense to apply this to body, but IE7 won't have that
      html.data('scroll-position', scrollPosition);
      html.data('previous-overflow', html.css('overflow'));
      html.css('overflow', 'hidden');
      window.scrollTo(scrollPosition[0], scrollPosition[1]);


      // un-lock scroll position
      var html = jQuery('html');
      var scrollPosition = html.data('scroll-position');
      html.css('overflow', html.data('previous-overflow'));
      window.scrollTo(scrollPosition[0], scrollPosition[1])*/

/* var handler = function(e) { 
  e.preventDefault();
  console.log('touching does nothing!');
}; */

/*$(document).bind('touchmove',function(e){
    e.preventDefault();
    var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
    console.log(touch.pageX);
});*/

/* $('#main')
    .bind('touchstart touchmove scrollstart scroll', handler); */

/*$(document).delegate("#main", "scrollstart", false);*/
/*.delegate(".ui-content", "scrollstart", false);function() { return false; }*/

// when you want them back
/*$('div').unbind();*/

/*$('div')
    .unbind('touchstart touchmove scroll', function(e) { 
        e.stopPropagation();
  e.preventDefault();
  console.log('touching does nothing!');
});
e.stopPropagation();*/