diff --git a/packages/core/src/middleware/scroller/util.ts b/packages/core/src/middleware/scroller/util.ts
index 40a9399..e09c97c 100644
--- a/packages/core/src/middleware/scroller/util.ts
+++ b/packages/core/src/middleware/scroller/util.ts
@@ -2,6 +2,7 @@ import type { Point, BoardViewerFrameSnapshot, ViewScaleInfo, ViewSizeInfo, View
 import { getViewScaleInfoFromSnapshot, getViewSizeInfoFromSnapshot } from '@idraw/util';
 
 const minScrollerWidth = 12;
+const scrollerLineWidth = 16;
 const scrollerAlpha = 0.12;
 const scrollerThumbAlpha = 0.36;
 
@@ -50,8 +51,8 @@ export function isPointInScrollbar(helperContext: ViewContext2D, p: Point, sizeI
 export function calcScrollerInfo(scaleInfo: ViewScaleInfo, sizeInfo: ViewSizeInfo) {
   const { width, height } = sizeInfo;
   const { offsetTop, offsetBottom, offsetLeft, offsetRight } = scaleInfo;
-  const sliderMinSize = 10 * 2.5;
-  const lineSize = 10;
+  const sliderMinSize = scrollerLineWidth * 2.5;
+  const lineSize = scrollerLineWidth;
   let xSize = 0;
   let ySize = 0;
   if (offsetLeft <= 0 && offsetRight <= 0) {
@@ -100,10 +101,10 @@ function drawScrollerThumb(
   let { x, y, h, w } = opts;
   const { color, axis } = opts;
   if (axis === 'X') {
-    y = y + h / 4 + 1;
+    y = y + h / 4 + 0;
     h = h / 2;
   } else if (axis === 'Y') {
-    x = x + w / 4 + 1;
+    x = x + w / 4 + 0;
     w = w / 2;
   }
 
diff --git a/packages/core/src/middleware/selector/index.ts b/packages/core/src/middleware/selector/index.ts
index 5bf9d86..6128ddf 100644
--- a/packages/core/src/middleware/selector/index.ts
+++ b/packages/core/src/middleware/selector/index.ts
@@ -254,7 +254,7 @@ export const MiddlewareSelector: BoardMiddleware = (opts) => {
           return;
         }
         if (data && Array.isArray(data?.elements) && ['drag', 'drag-list'].includes(actionType)) {
-          const viewInfo = calcElementsViewInfo(data.elements, viewSize, scaleInfo);
+          const viewInfo = calcElementsViewInfo(data.elements, viewSize, { extend: true });
           sharer.setActiveStorage('contextX', viewInfo.contextSize.contextX);
           sharer.setActiveStorage('contextY', viewInfo.contextSize.contextY);
           sharer.setActiveStorage('contextHeight', viewInfo.contextSize.contextHeight);
diff --git a/packages/util/src/lib/element.ts b/packages/util/src/lib/element.ts
index e897529..ba65f0b 100644
--- a/packages/util/src/lib/element.ts
+++ b/packages/util/src/lib/element.ts
@@ -1,4 +1,4 @@
-import type { Data, Element, ElementType, ElementSize, ViewContextSize, ViewScaleInfo, ViewSizeInfo } from '@idraw/types';
+import type { Data, Element, ElementType, ElementSize, ViewContextSize, ViewSizeInfo } from '@idraw/types';
 import { rotateElementVertexes } from './rotate';
 
 function getGroupIndexes(elem: Element<'group'>, uuids: string[], parentIndex: string): string[] {
@@ -188,7 +188,9 @@ export function calcElementsContextSize(elements: Array<Element<ElementType>>, o
 export function calcElementsViewInfo(
   elements: Array<Element<ElementType>>,
   prevViewSize: ViewSizeInfo,
-  scaleInfo: ViewScaleInfo
+  options?: {
+    extend: boolean;
+  }
 ): {
   contextSize: ViewContextSize;
   changeContextLeft: number;
@@ -198,6 +200,13 @@ export function calcElementsViewInfo(
 } {
   const contextSize = calcElementsContextSize(elements, { viewWidth: prevViewSize.width, viewHeight: prevViewSize.height });
 
+  if (options?.extend === true) {
+    contextSize.contextX = Math.min(contextSize.contextX, prevViewSize.contextX);
+    contextSize.contextY = Math.min(contextSize.contextY, prevViewSize.contextY);
+    contextSize.contextWidth = Math.max(contextSize.contextWidth, prevViewSize.contextWidth);
+    contextSize.contextHeight = Math.max(contextSize.contextHeight, prevViewSize.contextHeight);
+  }
+
   let changeContextLeft = 0;
   let changeContextRight = 0;
   let changeContextTop = 0;