diff --git a/src/interaction/helper/data-range.ts b/src/interaction/helper/data-range.ts
index 6b21288983..74e9b9f281 100644
--- a/src/interaction/helper/data-range.ts
+++ b/src/interaction/helper/data-range.ts
@@ -12,10 +12,17 @@ export const getDataByScaleRange = (
   field: string,
   values: string[],
   data: object[],
-  [start, end]: [number, number]
+  [start, end]: [number, number],
+  vertical: boolean = false
 ): object[] => {
   const groupedData = groupBy(data, field);
-  const newValues = values.slice(start, end);
+  const newValues = vertical
+    ? values
+        .slice()
+        .reverse()
+        .slice(start, end)
+        .reverse()
+    : values.slice(start, end);
 
   return flatten(map(newValues, (value: string) => groupedData[value] || []));
 };
diff --git a/src/interaction/scrollbar.ts b/src/interaction/scrollbar.ts
index f8f91262fb..de7fba130c 100644
--- a/src/interaction/scrollbar.ts
+++ b/src/interaction/scrollbar.ts
@@ -165,20 +165,25 @@ export default class ScrollBarInteraction extends BaseInteraction {
   }
 
   private getScrollRange(): [number, number] {
-    const startIdx: number = Math.floor((this.cnt - this.step) * this.ratio);
-    const endIdx: number = startIdx + this.step;
+    const startIdx: number = Math.floor((this.cnt - this.step) * clamp(this.ratio, 0, 1));
+    const endIdx: number = Math.min(startIdx + this.step, this.cnt);
 
     return [startIdx, endIdx];
   }
 
   private changeViewData([startIdx, endIdx]: [number, number]): void {
+    const config: Required<IScrollBarInteractionConfig> = getValidScrollBarConfig(this.getInteractionConfig());
     const viewLayer: ViewLayer = this.getViewLayer();
     const { meta } = viewLayer.options;
     const origData: object[] = viewLayer.getData();
-    const newData: object[] = getDataByScaleRange(this.xScaleCfg.field, this.xScaleCfg.values, origData, [
-      startIdx,
-      endIdx,
-    ]);
+    console.log(`changeViewData range = [${startIdx}, ${endIdx}]`);
+    const newData: object[] = getDataByScaleRange(
+      this.xScaleCfg.field,
+      this.xScaleCfg.values,
+      origData,
+      [startIdx, endIdx],
+      config.type === 'vertical'
+    );
 
     // ScrollBar在滚动过程中保持Y轴上scale配置: min/max/ticks
     this.yScalesCfg.forEach((cfg) => {