JSFiddle - React, Tailwind, and code Playground

by CoolBuys1290

HTML

<head>
  <meta charset="UTF-8">
  <title>CodePen - Textarea NanoScroll</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/jquery.nanoscroller/0.8.6/css/nanoscroller.min.css'><link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div id="about" class="nano">
  <div class="nano-resize"></div>
  <textarea class="nano-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis totam, voluptates dignissimos numquam rem officia quia velit illum perferendis porro quos dicta hic veritatis ab beatae illo libero consectetur aspernatur nemo architecto cum dolores omnis? Possimus, eum sequi eos nesciunt, pariatur amet sapiente ea, nam harum deserunt nihil quibusdam voluptas porro cumque aliquam distinctio deleniti dolorum sed praesentium inventore obcaecati! Earum non, porro numquam quas neque enim eveniet nobis perspiciatis nulla fugit maiores molestias dolorem odio, officia nihil. Iure quaerat sed hic est! Velit tempore veritatis nam consequuntur, expedita numquam, asperiores, libero molestias provident illum suscipit eveniet, quasi nostrum laborum commodi hic natus! Explicabo cum nemo dolore, ratione unde iste accusamus nihil veniam animi officiis illo magnam sit excepturi totam ab doloribus modi consequuntur eum nostrum expedita voluptatem odit consequatur impedit voluptate placeat. Veritatis ipsam quam, repellendus incidunt eos dolorem ipsum, sunt ea adipisci facilis! Accusamus quibusdam optio unde vero possimus dolorem, accusantium ad, atque, aliquam reiciendis officia itaque quas quo reprehenderit mollitia sunt sequi molestiae odit. Magni fuga, consectetur? Animi ab illo, sequi optio modi a dignissimos fugit ea eligendi nisi repellendus cum at quasi tempora nesciunt quia, dicta maiores laudantium, voluptatum hic esse vitae quos. Id dignissimos tenetur excepturi sapiente suscipit voluptatum inventore non magnam iure in, quasi, magni dolorum, quos impedit dolores facere distinctio eligendi?...

CSS

* {
  box-sizing: border-box;
}
.nano {
  width: 300px; height: 150px;
  min-height: 150px;
  margin: 50px auto;
  background: #def;
  border-radius: 7px;
-webkit-box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.5);
box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.5);
}
.nano .nano-content {
  border: 0;
  resize: none;
  background: transparent;
  padding: 10px;
  width: calc(100% - 20px);
}
.nano>.nano-content:focus {
    outline: none;
}
.nano .nano-pane   {
  background: #888;
  right: 5px;
  top: 5px;
  bottom: 25px;
}
.nano .nano-slider { background: #111; }

.nano .nano-resize {
  opacity: 0;
  -webkit-transition: .2s;
    -moz-transition: .2s;
    -o-transition: .2s;
    transition: .2s;
  position: absolute;
  bottom: 10px;
  right: 5px;
  width: 10px;
  height: 10px;
  background: #888;
  cursor: ns-resize;
}

.nano .nano-resize::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #888;
}

.nano:hover .nano-resize {
  opacity: 1;
}

@media (max-width: 768px) {
  .nano .nano-pane {
    opacity: 0.99;
  }
  .nano .nano-resize {
    opacity: 0.99;
  }
}

.info {
  text-align: center;
}

JavaScript

/* Add one or more listeners to an element
** @param {DOMElement} element - DOM element to add listeners to
** @param {string} eventNames - space separated list of event names, e.g. 'click change'
** @param {Function} listener - function to attach for each event as a listener
*/
function addListenerMulti(element, eventNames, listener) {
  var events = eventNames.split(' ');
  for (var i=0, iLen=events.length; i<iLen; i++) {
    element.addEventListener(events[i], listener, false);
  }
}

var info = document.querySelector('.info');
var nanoContent = document.querySelector('.nano-content');
var nano = document.querySelector('.nano');

$(".nano").nanoScroller();

addListenerMulti(nanoContent, 'keyup cut paste', function(){
  $(".nano").nanoScroller();
});

var resizer = document.querySelector('.nano-resize');

var startY, startHeight;

resizer.addEventListener('pointerdown', initDrag);

function initDrag(e) {
  e.preventDefault();
  console.log(e);
  startY = e.y;
  startHeight = parseInt(document.defaultView.getComputedStyle(nano).height, 10);
  document.documentElement.addEventListener('pointermove', doDrag);
  document.documentElement.addEventListener('pointerup', stopDrag);
  info.innerHTML = 'pointerstart ' + startHeight;
}

function doDrag(e) {
  console.log(e);
  nano.style.height = (startHeight + e.y - startY) + 'px';
  $(".nano").nanoScroller();
  info.innerHTML = 'pointermove ' + nano.style.height;
}

function stopDrag(e) {
  console.log(e);
  document.documentElement.removeEventListener('pointermove', doDrag);
  document.documentElement.removeEventListener('pointerup', stopDrag);
  info.innerHTML = 'pointerup';
}