Cypress如何实现不受时长限制精准滚动指定像素距离

Cypress 原生提供的 scrollIntoView、scrollTo 命令不支持不限时长精准滚动到指定像素距离的能力，这是两个命令底层的动画实现逻辑决定的：

• 两个命令的滚动逻辑是固定时长插值动画：从触发命令时的当前滚动位置开始，在传入的 duration 时长内做缓动移动，时长耗尽就立刻终止滚动，不会校验是否到达传入的目标坐标
• 命令执行时会自动把传入的目标坐标和「触发命令瞬间容器的最大可滚动距离」做比较，取更小值作为动画的终点，不会在滚动过程中动态感知容器尺寸变化
• 默认 duration 值为 0，所以直接执行 cy.scrollTo(100,100) 不会产生任何滚动效果

不需要依赖原生命令的 duration 参数，通过自定义Cypress命令直接操作DOM滚动属性，或者自己实现以「到达目标位置」为终止条件的滚动逻辑，就能完全满足需求。

方案1：无动画精准滚动（最常用） #

直接操作DOM的 scrollLeft、scrollTop 属性，跳过所有动画逻辑，设置后立刻到达指定滚动位置，不存在时长不够滚不到的问题。
你可以在 cypress/support/commands.js 中添加如下自定义命令：

Cypress.Commands.add('scrollToExact', { prevSubject: 'optional' }, (subject, x, y) => {
  // 未指定滚动容器时默认滚动整个窗口
  const getTarget = () => subject ? cy.wrap(subject) : cy.window()

  return getTarget().then($target => {
    const el = $target[0]
    // 直接设置滚动位置
    if (el === window) {
      el.scrollTo(x, y)
    } else {
      el.scrollLeft = x
      el.scrollTop = y
    }
    // 校验滚动到位后再结束命令，自动重试适配动态渲染场景
    return getTarget().should($t => {
      const targetEl = $t[0]
      const currentX = targetEl === window ? targetEl.scrollX : targetEl.scrollLeft
      const currentY = targetEl === window ? targetEl.scrollY : targetEl.scrollTop
      // 计算当前容器最大可滚动距离，目标位置超出时自动停在边界
      const maxY = targetEl === window ? document.documentElement.scrollHeight - window.innerHeight : targetEl.scrollHeight - targetEl.clientHeight
      const maxX = targetEl === window ? document.documentElement.scrollWidth - window.innerWidth : targetEl.scrollWidth - targetEl.clientWidth
      // 允许1px的浏览器渲染误差
      expect(currentX).to.be.closeTo(Math.min(x, maxX), 1)
      expect(currentY).to.be.closeTo(Math.min(y, maxY), 1)
    })
  })
})

使用方式和原生 scrollTo 完全一致：

• 滚动窗口到(100,100)：cy.scrollToExact(100, 100)
• 滚动指定容器到(10000,10000)：cy.get('.scroll-container').scrollToExact(10000, 10000)

这个方案完全不需要设置duration，不管容器尺寸怎么随动态数据变化，命令会一直重试直到滚动位置符合预期才会往下执行，不会出现滚到一半终止的问题。

方案2：带动画的精准滚动 #

如果你需要保留滚动的动画过程，又不想受固定duration限制，可以自己实现逐帧滚动逻辑，直到到达目标位置再终止，不需要提前预估时长。示例自定义命令：

Cypress.Commands.add('scrollToExactWithAnimate', { prevSubject: 'optional' }, (subject, x, y, step = 20) => {
  const getTarget = () => subject ? cy.wrap(subject) : cy.window()

  const scrollOneFrame = () => {
    return getTarget().then($t => {
      const el = $t[0]
      const currentX = el === window ? el.scrollX : el.scrollLeft
      const currentY = el === window ? el.scrollY : el.scrollTop
      // 实时计算当前容器最大可滚动距离，适配动态加载导致的容器尺寸变化
      const maxY = el === window ? document.documentElement.scrollHeight - window.innerHeight : el.scrollHeight - el.clientHeight
      const maxX = el === window ? document.documentElement.scrollWidth - window.innerWidth : el.scrollWidth - el.clientWidth
      const targetX = Math.min(x, maxX)
      const targetY = Math.min(y, maxY)

      // 到达目标位置就终止递归
      if (Math.abs(currentX - targetX) <= 1 && Math.abs(currentY - targetY) <= 1) {
        return true
      }

      // 每帧移动固定步长
      const nextX = currentX + Math.sign(targetX - currentX) * Math.min(step, Math.abs(targetX - currentX))
      const nextY = currentY + Math.sign(targetY - currentY) * Math.min(step, Math.abs(targetY - currentY))
      
      if (el === window) {
        el.scrollTo(nextX, nextY)
      } else {
        el.scrollLeft = nextX
        el.scrollTop = nextY
      }

      // 等待约1帧（16ms）后继续下一次滚动
      return cy.wait(16, { log: false }).then(scrollOneFrame)
    })
  }

  return scrollOneFrame()
})

这个方案每帧固定移动指定步长，不管总距离是100px还是10000px，不管滚动过程中容器因为动态加载发生什么尺寸变化，都会一直滚到目标位置才结束，不会因为固定时长到了就停在半路。

内容的提问来源于stack exchange，提问作者manymanymore