<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<h2>Scroll Example</h2>
<p>Request you to view in full screen mode</p>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" id="open">Open Scroll</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content" >
<div class="modal-header" >
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<div class="scrollbar" id="style-4" >
<div class="side-left">
</div>
<div class="scroll-content" >
<h2>Hindu Scroll (Letter) Example</h2>
<p>Some text in the modal.Some text in the modal.Some text in the modal. Some text in the modal.</p>
<p>Some text in the modal.Some text in the modal.Some text in the modal. Some text in the modal.</p>
<p>Some text in the modal.Some text in the modal.Some text in the modal. Some text in the modal.</p>
<p>Some text in the modal.Some text in the modal.Some text in the modal. Some text in the modal.</p>
<p>Some text in the modal.Some text in the modal.Some text in the modal. Some text in the modal.</p>
<p>Some text in the modal.Some text in the modal.Some text in the modal. Some text in the modal.</p>
<p>Some text in the modal.Some text in the modal.Some text in the modal. Some text in the modal.</p>
<p>Some text in the modal.Some text in the modal.Some text in the modal. Some text in the modal.</p>
<p>by Anurag Singh</p>
<button type="button" class="btn btn-default" id="close">Close</button>
</div>
<div class="side-right" >
</div>
</div>
<div class="modal-footer" >
</div>
</div>
</div>
</div>
</div>
</div>