JSFiddle - React, Tailwind, and code Playground

by Praveen Kumar Purushothaman

HTML

<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div id="scrollPane">
  <div class="wrap">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore illo nihil esse quibusdam rerum assumenda, numquam nostrum velit consequuntur asperiores qui ex eum beatae ut id cumque ipsum voluptate, fuga.</p>
    <p>Sapiente ea et fuga exercitationem laudantium natus rem, similique possimus mollitia soluta sunt aliquam maiores labore tenetur, animi debitis non rerum illo dolorum nostrum reprehenderit voluptate. Adipisci dolores repellendus placeat.</p>
    <p>Modi quisquam facere in aperiam, quae provident et sequi fugiat molestiae tempore, doloribus deleniti dolores enim. Non asperiores, laboriosam, laborum molestiae dicta corporis repellendus ad, deleniti nostrum pariatur id nesciunt!</p>
    <p>Rerum, perferendis consequatur quasi et, ipsum amet sed commodi distinctio. Dicta itaque quam saepe quod illo aperiam, soluta, quis ipsa, eum aspernatur tempora quasi, repellendus est quo. Tempore, ullam, mollitia.</p>
    <p>Fugit tempora at ad sunt quae quo veniam est, quisquam, et autem quia. Aliquam adipisci laboriosam cum ipsam dicta vel voluptates fuga beatae nobis amet. Atque laboriosam doloremque doloribus ipsa?</p>
    <p>Suscipit odio, sequi assumenda, dignissimos tempore, illo aliquam omnis excepturi laborum consequatur rerum vel non corporis doloremque sunt sint saepe quidem modi voluptatem nihil ut. Ducimus quos nihil eligendi hic?</p>
    <p>Quasi quas rem omnis rerum, non, optio voluptate, esse libero neque accusantium quo magni cum error, nesciunt amet doloribus odio! Incidunt saepe, voluptas magnam ipsam impedit assumenda iusto beatae aliquid!</p>
    <p>Iste quisquam sunt error hic voluptas autem saepe commodi porro pariatur. Inventore quisquam ea quasi, laudantium natus neque officia debitis, adipisci facilis accusamus enim...

CSS

* {
  margin: 0; padding: 0; list-style: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 1;
}
body {
  margin: 15px;
}
#scrollPane {
  padding: 10px;
  max-height: 250px;
  overflow: hidden;
  background-color: #fff;
}
#scrollPane p {
  margin: 0 0 10px;
  text-align: justify;
}
.buttons {
  overflow: hidden;
}
.buttons span {
  float: left;
  width: 50%;
  background-color: #ccc;
  border: 1px solid #999;
  cursor: pointer;
  text-align: center;
  font-size: 0.75em;
  padding: 0 0 1px;
}

JavaScript

$(function () {
  $(".prev").mouseover(function () {
    $("#scrollPane").animate({
      "scrollTop": 0
    }, $("#scrollPane .wrap").outerHeight() - $("#scrollPane .wrap").scrollTop());
  }).mouseout(function () {
    $("#scrollPane").stop();
  });
  $(".next").mouseover(function () {
    $("#scrollPane").animate({
      "scrollTop": $("#scrollPane .wrap").height()
    }, $("#scrollPane .wrap").height() * 2);
  }).mouseout(function () {
    $("#scrollPane").stop();
  });
});