diff --git a/src/components/scroll/scroll.vue b/src/components/scroll/scroll.vue index 10c8e699..f0fdb9c8 100644 --- a/src/components/scroll/scroll.vue +++ b/src/components/scroll/scroll.vue @@ -55,7 +55,11 @@ loadingText: { type: String }, - distanceToEdge: [Number, Array] + distanceToEdge: [Number, Array], + stopSlide: { + type: Boolean, + default: false + } }, data() { const distanceToEdge = this.calculateProximityThreshold(); @@ -86,7 +90,12 @@ return `${prefixCls}-wrapper`; }, scrollContainerClasses() { - return `${prefixCls}-container`; + return [ + `${prefixCls}-container`, + { + [`${prefixCls}-container-loading`]: this.showBodyLoader && this.stopSlide + } + ]; }, slotContainerClasses() { return [ diff --git a/src/styles/components/scroll.less b/src/styles/components/scroll.less index aa18a5a3..0d1e378c 100644 --- a/src/styles/components/scroll.less +++ b/src/styles/components/scroll.less @@ -12,6 +12,21 @@ overflow-y: scroll; } + @keyframes ani-stop-slide { + from { + overflow-y: hidden; + tansform:translateZ(0); + } + to { + overflow-y: scroll; + tansform:translateZ(0); + } + } + + &-container-loading { + animation: ani-stop-slide 1.5s; + } + &-content { opacity: 1; transition: opacity 0.5s;