| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8">
- <title>perfect-scrollbar example</title>
- <link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
- <script src="../dist/js/perfect-scrollbar.js"></script>
- <style>
- #description {
- border: 1px solid gray;
- height:150px;
- width: 400px;
- overflow: auto;
- position: relative;
- }
- </style>
- </head>
- <body>
- <div id="description" class="wrapper">
- <p>The command takes options applicable</p>
- <p>The command takes options applicable</p>
- <p>The command takes options applicable</p>
- <p>The command takes options applicable</p>
- <p>The command takes options applicable</p>
- <p>The command takes options applicable</p>
- <p>The command takes options applicable</p>
- <p>The command takes options applicable</p>
- <p>The command takes options applicable</p>
- <p>The command takes options applicable</p>
- </div>
- <button id='redraw'>Redraw</button>
- <script>
- var $ = document.querySelector.bind(document);
- window.onload = function () {
- Ps.initialize($('#description'), {
- useSelectionScroll: true
- });
- };
- $('#redraw').addEventListener('click', function () {
- var oldHtml = $('#description').innerHTML;
- $('#description').innerHTML = '';
- setTimeout(function () {
- $('#description').innerHTML = '' +
- '<p>The command takes options applicable</p>' +
- '<p>The command takes options applicable</p>' +
- '<p>The command takes options applicable</p>' +
- '<p>The command takes options applicable</p>' +
- '<p>The command takes options applicable</p>' +
- '<p>The command takes options applicable</p>' +
- '<p>The command takes options applicable</p>' +
- '<p>The command takes options applicable</p>' +
- '<p>The command takes options applicable</p>' +
- '<p>The command takes options applicable</p>';
- Ps.update($('#description'));
- }, 500);
- });
- </script>
- </body>
- </html>
|