scroll-view 快到左边才自动滑动

解决 scroll-view 接近左侧时自动滚动
为了使 scroll-view 在接近左侧边界时能够实现自动滚动的效果，可以采用 JavaScript 结合 CSS 动画的方式处理。具体来说，在检测到用户滚动位置靠近左边缘时触发自动滚动逻辑。
方法概述
通过监听用户的滚动事件来判断当前位置是否达到设定阈值。一旦满足条件，则启动定时器逐步调整 scrollLeft 值以模拟平滑滚动效果[^2]。
实现方案
下面是一个基于 Vue.js 和 Uni-app 的解决方案：
<template>
<view class="container">
<!-- 设置可滚动容器 -->
<scroll-view
class="scrollView"
@touchmove.stop.prevent=""
:scroll-x="true"
:scroll-with-animation="true"
ref="scrollViewRef"
@scroll="handleScroll"
>
<view v-for="(item, index) in items" :key="index" class="item">{{ item }}</view>
</scroll-view>
</view>
</template>

<script setup>
import { ref } from 'vue';

const scrollViewRef = ref(null);
let autoScrollInterval;
const threshold = 50; // 自定义临界值(px)

// 模拟数据列表
const items = Array.from({ length: 20 }, (_, i) => `Item ${i + 1}`);

function handleScroll(e) {
const scrollOffsetX = e.detail.scrollLeft;

if (scrollOffsetX <= threshold &amp;&amp; !autoScrollInterval) {
startAutoScroll();
}
}

function startAutoScroll() {
let currentScrollPosition = 0;

autoScrollInterval = setInterval(() => {
currentScrollPosition -= 5; // 调整每次移动的距离

if (currentScrollPosition >= 0) {
scrollViewRef.value.scrollTo({
left: currentScrollPosition,
duration: 0
});
} else {
clearInterval(autoScrollInterval);
autoScrollInterval = null;
}
}, 16); // 控制帧率约为每秒60次更新
}
</script>

<style scoped lang="scss">
.container {
padding-top: 20px;
}

.scrollView {
white-space: nowrap;
overflow-x: hidden;
width: 90%;
margin: 0 auto;
border: 1px solid #ccc;
}

.item {
display: inline-block;
min-width: 100px;
text-align: center;
line-height: 40px;
background-color: lightblue;
margin-right: 10px;
}
</style>
登录后复制
此代码片段展示了如何利用 @scroll 事件监听水平方向上的滚动行为，并根据当前滚动偏移量决定何时开启自动化滚动过程。当检测到接近页面左边沿时(<=threshold)，会调用 startAutoScroll() 函数执行连续的小幅度向右滚动操作直到完全回到起始位置为止[^3]。