scrollbar.scss 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
  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. touch-action: none;
  21. background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1));
  22. .swiper-scrollbar-disabled > &,
  23. &.swiper-scrollbar-disabled {
  24. display: none !important;
  25. }
  26. .swiper-horizontal > &,
  27. &.swiper-scrollbar-horizontal {
  28. position: absolute;
  29. left: var(--swiper-scrollbar-sides-offset, 1%);
  30. bottom: var(--swiper-scrollbar-bottom, 4px);
  31. top: var(--swiper-scrollbar-top, auto);
  32. z-index: 50;
  33. height: var(--swiper-scrollbar-size, 4px);
  34. width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
  35. }
  36. .swiper-vertical > &,
  37. &.swiper-scrollbar-vertical {
  38. position: absolute;
  39. left: var(--swiper-scrollbar-left, auto);
  40. right: var(--swiper-scrollbar-right, 4px);
  41. top: var(--swiper-scrollbar-sides-offset, 1%);
  42. z-index: 50;
  43. width: var(--swiper-scrollbar-size, 4px);
  44. height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
  45. }
  46. }
  47. .swiper-scrollbar-drag {
  48. height: 100%;
  49. width: 100%;
  50. position: relative;
  51. background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5));
  52. border-radius: var(--swiper-scrollbar-border-radius, 10px);
  53. left: 0;
  54. top: 0;
  55. }
  56. .swiper-scrollbar-cursor-drag {
  57. cursor: move;
  58. }
  59. .swiper-scrollbar-lock {
  60. display: none;
  61. }