| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253 |
- <!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>
- #test {
- border: 1px solid gray;
- max-height: 300px;
- width: 400px;
- overflow: auto;
- position: relative;
- }
- #test .element {
- margin: 1px;
- background-color: #cec;
- height: 44px;
- line-height: 44px;
- }
- </style>
- </head>
- <body>
- <div id="test" class="wrapper">
- <div class='element'>Hello! Click <a href='#'>here</a> to remove this!</div>
- <div class='element'>Hello! Click <a href='#'>here</a> to remove this!</div>
- <div class='element'>Hello! Click <a href='#'>here</a> to remove this!</div>
- <div class='element'>Hello! Click <a href='#'>here</a> to remove this!</div>
- <div class='element'>Hello! Click <a href='#'>here</a> to remove this!</div>
- <div class='element'>Hello! Click <a href='#'>here</a> to remove this!</div>
- <div class='element'>Hello! Click <a href='#'>here</a> to remove this!</div>
- <div class='element'>Hello! Click <a href='#'>here</a> to remove this!</div>
- <div class='element'>Hello! Click <a href='#'>here</a> to remove this!</div>
- <div class='element'>Hello! Click <a href='#'>here</a> to remove this!</div>
- <div class='element'>Hello! Click <a href='#'>here</a> to remove this!</div>
- <div class='element'>Hello! Click <a href='#'>here</a> to remove this!</div>
- </div>
- <script type="text/javascript">
- var $ = document.querySelector.bind(document);
- window.onload = function () {
- var test = $('#test');
- Ps.initialize(test);
- [].forEach.call(test.querySelectorAll('.element'), function (el) {
- el.querySelector('a').addEventListener('click', function () {
- el.parentNode.removeChild(el);
- Ps.update(test);
- });
- });
- };
- </script>
- </body>
- </html>
|