scale scroll 的实现

41 阅读1分钟

背景:

如图红色块是一个使用 transform 放大的组件,灰色块是容器。如何在红色块放大的时候,灰色块可以合理的使用滚动条滚动起来,上下左右滑动红色块,以便可以正确预览所有内容

case 1: 部分超出 image.png

case 2: 没有超出 image.png

case 3: 全部超出 image.png

实现思路

  • 通过 left / right 是否超出,控制横向滚动条的显隐和滚动逻辑
  • 通过 top / bottom 是否超出,控制垂直滚动条的显隐和滚动逻辑