Scrollbar not work, when color encode is equal to x encode #4012

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

同时设置color和scrollbar，会导致图标渲染异常，如上述链接所示。

Setting both color and scrollbar, will cause chart render uncorrect, as the link above. <img width="720" alt="image" src="https://user-images.githubusercontent.com/6788391/176183913-30ad6ddb-49db-40df-99ee-02da222db8ba.png">

import { Chart } from "@antv/g2";

const data = Array.from({ length: 50 }, (_, index) => ({
  title: `选项 ${index + 1}`,
  value: 100 * (index + 1)
}));

const chart = new Chart({
  container: "root",
  height: 300,
  autoFit: true
});

// 这里只要设置了color和滚动条就会渲染错误
chart.interval().position("title*value").color("title");

chart.option("scrollbar", {
  type: "horizontal"
});

chart.data(data);
chart.render();

期望设置颜色的同时，也可以正确显示滚动条

Expect color and scrollbar can be set at the same time <img width="725" alt="image" src="https://user-images.githubusercontent.com/6788391/176184062-a8ac94af-b6f8-4eb8-9c52-6812d307bc04.png">

<!-- generated by antv-issue-helper. DO NOT REMOVE -->