本文详解如何利用 useref 和 scrollwidth/clientwidth 精确判断水平可滚动容器的滚动边界，动态控制左右导航按钮的禁用状态，确保用户体验一致且逻辑健壮。
在实现横向滚动卡片列表（如商品画廊、时间轴等）时，常需根据当前滚动位置启用或禁用「向左/向右」导航按钮。仅依赖 scrollLeft === 0 判断左侧边界是可行的，但右侧边界的正确判定不能写作 scrollLeft === scrollWidth – clientWidth 的简单相等比较——因为浏览器滚动行为存在微小偏移、缩放差异或子元素盒模型计算误差，直接使用 === 易导致按钮过早/过晚禁用。
✅ 正确做法是：计算最大可滚动距离 maxScroll = scrollWidth – clientWidth，并使用 Math.abs(scrollLeft – maxScroll) < 1 进行容差判断（推荐阈值 1px），兼顾精度与鲁棒性。
以下是完整、生产就绪的实现方案：
import { useRef, useState, useEffect } from ‘react’;export default function ScrollableGallery() { const cardContainerRef = useRef<HTMLDivElement>(null); const [isAtLeft, setIsAtLeft] = useState(true); const [isAtRight, setIsAtRight] = useState(false); useEffect(() => { const container = cardContainerRef.current; if (!container) return; const updateScrollState = () => { const { scrollLeft, scrollWidth, clientWidth } = container; const maxScroll = scrollWidth – clientWidth; // 左侧边界：scrollLeft ≈ 0 setIsAtLeft(scrollLeft < 1); // 右侧边界：scrollLeft ≈ maxScroll（带 1px 容差） setIsAtRight(Math.abs(scrollLeft – maxScroll) < 1); }; // 初始化状态 updateScrollState(); // 监听滚动 container.addEventListener(‘scroll’, updateScrollState); return () => { container.removeEventListener(‘scroll’, updateScrollState); }; }, []); const handleScrollLeft = () => { if (cardContainerRef.current) { cardContainerRef.current.scrollBy({ left: -200, behavior: ‘smooth’ }); } }; const handleScrollRight = () => { if (cardContainerRef.current) { cardContainerRef.current.scrollBy({ left: 200, behavior: ‘smooth’ }); } }; return ( <div className="flex items-center gap-4"> {/* 左箭头按钮 */} <button onClick={handleScrollLeft} disabled={isAtLeft} className={`p-2 rounded-full transition-opacity ${isAtLeft ? ‘opacity-50 cursor-not-allowed’ : ‘opacity-100 hover:bg-gray-100’}`} aria-label="Scroll left" > <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor"> <path d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" /> </svg> </button> {/* 可滚动容器 */} <div ref={cardContainerRef} className="flex overflow-x-auto scrollbar-hide py-2 space-x-4 snap-x snap-mandatory" style={{ scrollBehavior: ‘smooth’ }} > {/* 示例卡片 —— 替换为实际内容 */} {[…Array(12)].map((_, i) => ( <div key={i} className="flex-none w-48 h-32 bg-blue-100 rounded-lg flex items-center justify-center snap-start" > Card {i + 1} </div> ))} </div> {/* 右箭头按钮 */} <button onClick={handleScrollRight} disabled={isAtRight} className={`p-2 rounded-full transition-opacity ${isAtRight ? ‘opacity-50 cursor-not-allowed’ : ‘opacity-100 hover:bg-gray-100’}`} aria-label="Scroll right" > <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor"> <path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" /> </svg> </button> </div> );}
? 关键注意事项：
✅ 始终使用 scrollBy() 或 scrollTo() 而非直接修改 scrollLeft：前者支持 behavior: ‘smooth’，且避免因并发操作导致的状态不一致；✅ 初始化时调用 updateScrollState()：防止组件挂载后初始状态错误（例如容器尚未渲染完成时 scrollWidth 为 0）；✅ 禁用按钮需同时设置 disabled 属性与视觉样式（如 opacity/cursor）：保障可访问性（a11y）与 UI 一致性；⚠️ 避免在 useEffect 依赖数组中遗漏 cardContainerRef —— 但它是一个稳定引用，无需加入依赖项；若未来涉及动态 ref 切换，则需额外处理；? 若容器内含图片或字体加载导致尺寸变化（如懒加载卡片），建议监听 resize 或使用 ResizeObserver 重新校准边界。
通过以上实现，你将获得一个响应灵敏、跨浏览器兼容、无障碍友好的水平滚动导航组件。核心在于理解：scrollWidth – clientWidth 是理论最大滚动值，而真实滚动位置需以容差方式比对，而非苛求绝对相等。
评论(0)