top-and-left-scrollbars.html 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <link href="../css/perfect-scrollbar.css" rel="stylesheet">
  5. <script src="../dist/perfect-scrollbar.js"></script>
  6. <style>
  7. #container {
  8. position: relative;
  9. margin: 0px auto;
  10. padding: 0px;
  11. width: 600px;
  12. height: 400px;
  13. overflow: auto;
  14. }
  15. #container .content {
  16. background-image: url('./assets/azusa.jpg');
  17. width: 1280px;
  18. height: 720px;
  19. }
  20. /* Change the alignment of scrollbars */
  21. /* Recommendation: modify CSS directly */
  22. .ps__rail-x {
  23. top: 0px;
  24. bottom: auto; /* If using `top`, there shouldn't be a `bottom`. */
  25. }
  26. .ps__rail-y {
  27. left: 0px;
  28. right: auto; /* If using `left`, there shouldn't be a `right`. */
  29. }
  30. .ps__thumb-x {
  31. top: 2px;
  32. bottom: auto; /* If using `top`, there shouldn't be a `bottom`. */
  33. }
  34. .ps__thumb-y {
  35. left: 2px;
  36. right: auto; /* If using `left`, there shouldn't be a `right`. */
  37. }
  38. </style>
  39. </head>
  40. <body>
  41. <div id="container">
  42. <div class="content">
  43. </div>
  44. </div>
  45. <script>
  46. new PerfectScrollbar('#container');
  47. </script>
  48. </body>
  49. </html>