@element-plus/nightly 0.0.20261010 → 0.0.20261011

package/theme-chalk/src/common/var.scss

@@ -1376,6 +1376,14 @@ $scrollbar: map.merge(
     'bg-color': getCssVar('text-color-secondary'),
     'hover-opacity': 0.5,
     'hover-bg-color': getCssVar('text-color-secondary'),
+    'top-mask-height': 40px,
+    'top-mask-color': getCssVar('bg-color'),
+    'bottom-mask-height': 40px,
+    'bottom-mask-color': getCssVar('bg-color'),
+    'left-mask-width': 40px,
+    'left-mask-color': getCssVar('bg-color'),
+    'right-mask-width': 40px,
+    'right-mask-color': getCssVar('bg-color'),
   ),
   $scrollbar
 );

package/theme-chalk/src/scrollbar.scss

@@ -25,6 +25,55 @@
     }
   }
 
+  @include e((mask, top-mask, bottom-mask, left-mask, right-mask)) {
+    position: absolute;
+    z-index: 1;
+    pointer-events: none;
+  }
+
+  @include e(mask) {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  @include e(top-mask) {
+    height: getCssVar('scrollbar-top-mask-height');
+    background: linear-gradient(
+      to top,
+      transparent,
+      getCssVar('scrollbar-top-mask-color')
+    );
+  }
+
+  @include e(bottom-mask) {
+    height: getCssVar('scrollbar-bottom-mask-height');
+    background: linear-gradient(
+      to bottom,
+      transparent,
+      getCssVar('scrollbar-bottom-mask-color')
+    );
+  }
+
+  @include e(left-mask) {
+    width: getCssVar('scrollbar-left-mask-width');
+    background: linear-gradient(
+      to left,
+      transparent,
+      getCssVar('scrollbar-left-mask-color')
+    );
+  }
+
+  @include e(right-mask) {
+    width: getCssVar('scrollbar-right-mask-width');
+    background: linear-gradient(
+      to right,
+      transparent,
+      getCssVar('scrollbar-right-mask-color')
+    );
+  }
+
   @include e(thumb) {
     position: relative;
     display: block;
@@ -81,6 +130,22 @@
   }
 }
 
+.#{$namespace}-scrollbar-mask-fade {
+  &-enter-active,
+  &-leave-active {
+    transition: opacity getCssVar('transition-duration-fast') ease-in-out;
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+}
+
 .#{$namespace}-scrollbar-fade {
   &-enter-active {
     transition: opacity 340ms ease-out;