diff --git a/common/changes/@visactor/vchart/fix-datazoom-scrollbar-bug_2023-11-14-13-11.json b/common/changes/@visactor/vchart/fix-datazoom-scrollbar-bug_2023-11-14-13-11.json
new file mode 100644
index 000000000..dd854832f
--- /dev/null
+++ b/common/changes/@visactor/vchart/fix-datazoom-scrollbar-bug_2023-11-14-13-11.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vchart",
+      "comment": "fix: default realtime not effect in scrollbar and datazoom. fix#1462",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vchart"
+}
\ No newline at end of file
diff --git a/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts b/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts
index 21b6a64a6..2d6ad6695 100644
--- a/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts
+++ b/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts
@@ -17,6 +17,7 @@ import type { IDataZoomSpec } from './interface';
 import { IFilterMode } from '../constant';
 import { Factory } from '../../../core/factory';
 import type { IZoomable } from '../../../interaction/zoom';
+import type { CartesianAxis } from '../../axis/cartesian';
 
 export class DataZoom<T extends IDataZoomSpec = IDataZoomSpec> extends DataFilterBaseComponent<T> {
   static type = ComponentTypeEnum.dataZoom;
@@ -156,14 +157,19 @@ export class DataZoom<T extends IDataZoomSpec = IDataZoomSpec> extends DataFilte
     if (!this._stateScale || !this._valueScale) {
       return;
     }
+    let stateScaleRange;
+    const relatedAxisRange = (this._relatedAxisComponent as CartesianAxis<any>).getScale().range();
     if (this._isHorizontal) {
-      this._stateScale.range([0, this._computeWidth() - handlerSize]);
+      stateScaleRange = this._visible ? [0, this._computeWidth() - handlerSize] : relatedAxisRange;
+      this._stateScale.range(stateScaleRange);
       this._valueScale.range([this._computeHeight() - this._middleHandlerSize, 0]);
     } else if (this.layoutOrient === 'left') {
-      this._stateScale.range([0, this._computeHeight() - handlerSize]);
+      stateScaleRange = this._visible ? [0, this._computeHeight() - handlerSize] : relatedAxisRange;
+      this._stateScale.range(stateScaleRange);
       this._valueScale.range([this._computeWidth() - this._middleHandlerSize, 0]);
     } else {
-      this._stateScale.range([0, this._computeHeight() - handlerSize]);
+      stateScaleRange = this._visible ? [0, this._computeHeight() - handlerSize] : relatedAxisRange;
+      this._stateScale.range(stateScaleRange);
       this._valueScale.range([0, this._computeWidth() - this._middleHandlerSize]);
     }