Perfect Scrollbar Example
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Perfect Scrollbar Example</title> <script src="jquery-1.11.1.min.js"></script> <script src="perfect-scrollbar.jquery.min.js"></script> <link rel="stylesheet" href="perfect-scrollbar.css"/> <style type="text/css"> .scroll { top: 100px; left: calc(50% - 250px); position: relative; padding-right: 9px; } .scroll p { padding: 20px; margin-left: 7px; border: 2px solid #404040; } </style> <script type="text/javascript"> $(document).ready(function () { $(".scroll").perfectScrollbar(); $(".scroll").perfectScrollbar("update"); }); </script> </head> <body> <div class="scroll" style="height:500px;width:500px;border:1px solid red;overflow:scroll"> <p>Paragraph 1</p> <p>Paragraph 2</p> <p>Paragraph 3</p> <p>Paragraph 4</p> <p>Paragraph 5</p> <p>Paragraph 6</p> <p>Paragraph 7</p> <p>Paragraph 8</p> <p>Paragraph 9</p> <p>Paragraph 10</p> <p>Paragraph 11</p> <p>Paragraph 12</p> <p>Paragraph 13</p> <p>Paragraph 14</p> <p>Paragraph 15</p> <p>Paragraph 16</p> <p>Paragraph 17</p> <p>Paragraph 18</p> <p>Paragraph 19</p> <p>Paragraph 20</p> </div> </body> </html>
