先贴代码

wxml：

<view>
  <view style="height: 30vh; border: 1px solid red; margin-bottom: 10rpx;">区域1</view>
  <view style="height: 50vh; border: 1px solid blue; margin-bottom: 10rpx;">区域2</view>
  <view style="height: 30vh; border: 1px solid green; margin-bottom: 10rpx;">区域3</view>
  <view style="height: 30vh; border: 1px solid black; margin-bottom: 10rpx;">区域4</view>

  <movable-area class="movable_area" bindtap="onClick">
      <movable-view class="movable_view" direction="all" bindchange="onChange" x="{{x}}" y="{{y}}" animation="{{false}}"></movable-view>
  </movable-area>

  <view style="height: 100vh;"></view>
</view>

wxss：

.movable_area {
  position: fixed; 
  top: 300rpx; 
  height: 600rpx; 
  width: 600rpx; 
  border: 1px solid black; 
  background-color: red;
}

.movable_view {
  height: 10px; 
  width: 10px; 
  background-color: white;
}

js：

Component({
  data: {
    x: 0, 
    y: 0,
  },
  methods: {

    onClick(event) {
      const sq = this.createSelectorQuery()
      const colorSelectAreaNodesRef = sq.select('.movable_area')
      colorSelectAreaNodesRef.boundingClientRect(res => {
        if (res) {
          this.setData({
            x: event.detail.x - res.left - 5,
            y: event.detail.y - res.top - 5
          })
          console.log("onClick, x: " + this.data.x + "; y: " + this.data.y)
        }
      })
      sq.exec()
    }, 
    onChange(event) {
      const {x, y} = event.detail
      console.log("onChange, x: " + x + "; y: " + y)
    }
  }
})

1. 当 movable-area 的 position 为 fixed 或处于遮罩层中时，如果页面没有滚动，点击 movable-area 任何一处 movable-view 都会移动到点击位置，比如点击顶部中间，movable-view 会移动到顶部中间

2. 但是当页面滚动了之后，再次点击 movable-area 的顶部，movable-view 只能移动到中间，而到不了顶部，与顶部的差距应该就是页面滚动的距离，难道 movable-area 点击事件 detail 中的 x、y 是相对于页面中的坐标吗（不管该元素有没有 fixed）？

3. 然而，当页面发生滚动之后，滑动 movable-view 的时候，是可以滑动到 movable-area 的任何区域的，没有受到页面滚动的影响

有一个场景，在实现拾色器的时候，就只能通过滑动 movable-view 来选取颜色了吗，禁止了 movable-area 的点击事件就不能点击某一处而移动到某一处这种快捷操作了。如果不禁止 movable-area 的点击事件，当页面原本就滚动了，点击顶部却跳到了别处，就感觉怪怪的，不知道这算不算是个问题