scrollbar.scss 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. @at-root {
  2. :root {
  3. /*
  4. --swiper-scrollbar-border-radius: 10px;
  5. --swiper-scrollbar-top: auto;
  6. --swiper-scrollbar-bottom: 4px;
  7. --swiper-scrollbar-left: auto;
  8. --swiper-scrollbar-right: 4px;
  9. --swiper-scrollbar-sides-offset: 1%;
  10. --swiper-scrollbar-bg-color: rgba(0, 0, 0, 0.1);
  11. --swiper-scrollbar-drag-bg-color: rgba(0, 0, 0, 0.5);
  12. --swiper-scrollbar-size: 4px;
  13. */
  14. }
  15. }
  16. .swiper-scrollbar {
  17. border-radius: var(--swiper-scrollbar-border-radius, 10px);
  18. position: relative;
  19. -ms-touch-action: none;
  20. background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1));
  21. .swiper-scrollbar-disabled > &,
  22. &.swiper-scrollbar-disabled {
  23. display: none !important;
  24. }
  25. .swiper-horizontal > &,
  26. &.swiper-scrollbar-horizontal {
  27. position: absolute;
  28. left: var(--swiper-scrollbar-sides-offset, 1%);
  29. bottom: var(--swiper-scrollbar-bottom, 4px);
  30. top: var(--swiper-scrollbar-top, auto);
  31. z-index: 50;
  32. height: var(--swiper-scrollbar-size, 4px);
  33. width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
  34. }
  35. .swiper-vertical > &,
  36. &.swiper-scrollbar-vertical {
  37. position: absolute;
  38. left: var(--swiper-scrollbar-left, auto);
  39. right: var(--swiper-scrollbar-right, 4px);
  40. top: var(--swiper-scrollbar-sides-offset, 1%);
  41. z-index: 50;
  42. width: var(--swiper-scrollbar-size, 4px);
  43. height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
  44. }
  45. }
  46. .swiper-scrollbar-drag {
  47. height: 100%;
  48. width: 100%;
  49. position: relative;
  50. background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5));
  51. border-radius: var(--swiper-scrollbar-border-radius, 10px);
  52. left: 0;
  53. top: 0;
  54. }
  55. .swiper-scrollbar-cursor-drag {
  56. cursor: move;
  57. }
  58. .swiper-scrollbar-lock {
  59. display: none;
  60. }