| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768 |
- <!DOCTYPE html>
- <html>
- <head>
- <link href="../css/perfect-scrollbar.css" rel="stylesheet">
- <script src="../dist/perfect-scrollbar.js"></script>
- <style>
- #container {
- position: relative;
- margin: 0px auto;
- padding: 0px;
- width: 600px;
- height: 400px;
- overflow: auto;
- }
- #container .content {
- background-image: url('./assets/azusa.jpg');
- width: 1280px;
- height: 720px;
- }
- .my-list, textarea {
- position: absolute;
- top: 0;
- left: 0;
- width: 130px;
- height: 200px;
- overflow: scroll;
- background-color: white;
- }
- ul {
- margin: 0;
- padding: 0;
- }
- li {
- box-sizing: border-box;
- padding: 10px 5px;
- border-width: 0 0 1px 0;
- list-style-type: none;
- margin: 0;
- }
- li:nth-child(even) {
- background-color: rgba(0,0,0,0.5);
- }
- </style>
- </head>
- <body>
- <div id="container">
- <div class="content">
- <textarea cols="20" rows="50" style="font-size: 120%">
- Children inside perfect scrollbar can be natively scrolled by the
- mousewheel. It automatically works for textarea elements, other
- elements need the .ps-child class.
- </textarea>
- <div class="my-list" style="left: 140px">
- <code>overflow: scroll</code>
- <ul><li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li><li>Six</li><li>Seven</li><li>Eight</li></ul>
- </div>
- <div class="my-list" style="left: 280px; overflow: auto">
- <code>overflow: auto</code>
- <ul><li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li><li>Six</li><li>Seven</li><li>Eight</li></ul>
- </div>
- </div>
- </div>
- <script type="text/javascript">
- new PerfectScrollbar('#container');
- </script>
- </body>
- </html>
|
