我想要整张表横向滚动的时候表格最左侧列表固定不参与横向滚动。最初我采用的是将最左侧列表和列表内容写在同一个scroll-view中然后左侧列表使用sticky吸顶处理。而这会导致移动端、小程序渲染会产生小数亚像素偏移边缘出现细缝隙多滚动区域联动时位置不同步视觉抖动。可以发现整个列表在竖向滚动的时候是一个整体而在横向滚动的时候左侧列表是不参与的。具体如下图A需要固定的左侧列表B需要固定的表头C完全不会动的D表格列表内容所以我们在写页面逻辑的时候可以分为表头部分和下部1、表头部分C可以直接固定然后使用scroll-x写B-C区域横向滚动是与列表内容一致的使用scroll-left绑定相同变量。2、下部A-C区域和D区域都是能上下滑动的但是只有D区域能左右滑动scroll-left绑定与表头滚动相同变量。所以最外层应该是一个scroll-y的scroll-view内部是两部分一个是固定的左侧列表一个是内容区域通过scroll-y控制其上下滑动具体可以参考代码template view classtable-wrapper !-- 表头区域 -- view classtable-header !-- 左侧固定表头 -- view classfixed-col-header序号/view !-- 右侧可滚动表头 -- scroll-view scroll-x classheader-scroll :scroll-leftscrollLeft scrollhandleHeaderScroll show-scrollbarfalse view classheader-row view classheader-cell姓名/view view classheader-cell年龄/view view classheader-cell性别/view view classheader-cell城市/view view classheader-cell职业/view /view /scroll-view /view !-- 表体区域 -- scroll-view scroll-y classtable-body show-scrollbarfalse view classbody-inner !-- 左侧固定列 -- view classfixed-col-body view classfixed-row v-for(item, index) in tableData :keyitem.id {{ index 1 }} /view /view !-- 右侧可滚动内容 -- scroll-view scroll-x classbody-scroll :scroll-leftscrollLeft scrollhandleBodyScroll show-scrollbarfalse view classbody-content view classbody-row v-foritem in tableData :keyitem.id view classbody-cell{{ item.name }}/view view classbody-cell{{ item.age }}/view view classbody-cell{{ item.gender }}/view view classbody-cell{{ item.city }}/view view classbody-cell{{ item.job }}/view /view /view /scroll-view /view /scroll-view /view /template script setup import { ref } from vue // 模拟表格数据 const tableData ref([ { id: 1, name: 张三, age: 25, gender: 男, city: 北京, job: 前端工程师 }, { id: 2, name: 李四, age: 30, gender: 女, city: 上海, job: 产品经理 }, { id: 3, name: 王五, age: 28, gender: 男, city: 广州, job: 后端开发 }, { id: 4, name: 赵六, age: 32, gender: 女, city: 深圳, job: UI设计师 }, { id: 5, name: 孙七, age: 27, gender: 男, city: 杭州, job: 测试工程师 }, ]) // 横向滚动位置整数化避免亚像素偏移 const scrollLeft ref(0) const handleHeaderScroll (e) { scrollLeft.value Math.round(e.detail.scrollLeft) } const handleBodyScroll (e) { scrollLeft.value Math.round(e.detail.scrollLeft) } /script style scoped /* 整体容器 */ .table-wrapper { width: 100%; background: #fff; border-radius: 8rpx; overflow: hidden; } /* 表头区域 */ .table-header { display: flex; background: #f5f7fa; border-bottom: 1rpx solid #eee; } /* 左侧固定表头 */ .fixed-col-header { width: 120rpx; flex-shrink: 0; height: 80rpx; line-height: 80rpx; text-align: center; font-weight: 500; border-right: 1rpx solid #eee; } /* 表头滚动容器 */ .header-scroll { flex: 1; min-width: 0; } .header-row { display: flex; width: max-content; min-width: 100%; } .header-cell { width: 180rpx; flex-shrink: 0; height: 80rpx; line-height: 80rpx; text-align: center; border-right: 1rpx solid #eee; } /* 表体区域 */ .table-body { height: 600rpx; } .body-inner { display: flex; min-height: 100%; } /* 左侧固定列 */ .fixed-col-body { width: 120rpx; flex-shrink: 0; background: #fff; border-right: 1rpx solid #eee; } .fixed-row { height: 80rpx; line-height: 80rpx; text-align: center; border-bottom: 1rpx solid #eee; } /* 右侧内容滚动容器 */ .body-scroll { flex: 1; min-width: 0; } .body-content { display: flex; flex-direction: column; width: max-content; min-width: 100%; } .body-row { display: flex; } .body-cell { width: 180rpx; flex-shrink: 0; height: 80rpx; line-height: 80rpx; text-align: center; border-right: 1rpx solid #eee; border-bottom: 1rpx solid #eee; } /style所以以后优先使用结构拆分flex布局可以有效避免这种问题