@@ -275,10 +275,10 @@
v-if="item.cover != ''"
:src="item.cover"
alt=""
- style="min-width: 0; display: block; width: 10vw; object-fit: cover"
+ class="reward-scroll-cover"
@error="handleRewardImageError($event, item.type)"
/>
-
+
{{ formatRewardDisplay(item.type, item) }}
,
@@ -385,6 +385,7 @@ let rewardRestartTimer = null
let rewardAnimationFrame = null
let rewardLastFrameTime = 0
let rewardLoopDistance = 0
+let rewardScrollPosition = 0
const waitForLayoutFrame = () => {
return new Promise((resolve) => {
@@ -433,6 +434,7 @@ const restartRewardScroll = async () => {
return
}
+ rewardScrollPosition = 0
viewport.scrollLeft = 0
rewardLastFrameTime = performance.now()
@@ -440,10 +442,13 @@ const restartRewardScroll = async () => {
const elapsed = now - rewardLastFrameTime
rewardLastFrameTime = now
const distancePerMs = rewardLoopDistance / 8000
- const nextScrollLeft = viewport.scrollLeft + distancePerMs * elapsed
+ rewardScrollPosition += distancePerMs * elapsed
- viewport.scrollLeft =
- nextScrollLeft >= rewardLoopDistance ? nextScrollLeft - rewardLoopDistance : nextScrollLeft
+ if (rewardScrollPosition >= rewardLoopDistance) {
+ rewardScrollPosition -= rewardLoopDistance
+ }
+
+ viewport.scrollLeft = rewardScrollPosition
rewardAnimationFrame = requestAnimationFrame(step)
}
@@ -516,6 +521,8 @@ onUnmounted(() => {
align-items: center;
overflow: hidden;
direction: ltr;
+ scroll-behavior: auto;
+ overflow-anchor: none;
}
.scroll-wrapper {
@@ -529,6 +536,27 @@ onUnmounted(() => {
align-items: center;
}
+.reward-scroll-item {
+ flex: 0 0 auto;
+ align-self: stretch;
+ display: flex;
+ align-items: center;
+ padding: 0 1vw;
+}
+
+.reward-scroll-cover {
+ flex: 0 0 auto;
+ display: block;
+ width: 10vw;
+ object-fit: cover;
+}
+
+.reward-scroll-text {
+ flex: 0 0 auto;
+ color: #fff;
+ white-space: nowrap;
+}
+
[dir='ltr'] .scroll-content {
margin-left: 4vw;
}