From 29b5230e51ec8b28e03cb535e27ac30186b56af4 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 19 Nov 2025 15:19:45 +0000
Subject: [PATCH 1/5] Initial plan


From fa95137dcb5832cd42fa1b1f9c301aa9f48e8097 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 19 Nov 2025 15:25:42 +0000
Subject: [PATCH 2/5] Add lockScroll option to control scrollbar hiding
 behavior

Co-authored-by: ruibaby <21301288+ruibaby@users.noreply.github.com>
---
 packages/search-widget/src/search-modal.ts | 13 +++++++---
 packages/widget/src/index.ts               | 29 ++++++++++++++++++++--
 2 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/packages/search-widget/src/search-modal.ts b/packages/search-widget/src/search-modal.ts
index f716d8e..f691516 100644
--- a/packages/search-widget/src/search-modal.ts
+++ b/packages/search-widget/src/search-modal.ts
@@ -19,6 +19,9 @@ export class SearchModal extends LitElement {
   @property({ type: Object })
   options = {};
 
+  @property({ type: Boolean })
+  lockScroll = true;
+
   constructor() {
     super();
 
@@ -42,10 +45,12 @@ export class SearchModal extends LitElement {
       return;
     }
 
-    if (this.open) {
-      document.body.style.overflow = 'hidden';
-    } else {
-      document.body.style.removeProperty('overflow');
+    if (this.lockScroll) {
+      if (this.open) {
+        document.body.style.overflow = 'hidden';
+      } else {
+        document.body.style.removeProperty('overflow');
+      }
     }
   }
 
diff --git a/packages/widget/src/index.ts b/packages/widget/src/index.ts
index 6155095..17df34d 100644
--- a/packages/widget/src/index.ts
+++ b/packages/widget/src/index.ts
@@ -10,7 +10,32 @@ const searchModalElement = document.createElement(
 
 document.body.append(searchModalElement);
 
-export function open(options: SearchOption) {
-  searchModalElement.options = options;
+export interface OpenOptions {
+  /**
+   * Search options for the search API
+   */
+  searchOptions?: SearchOption;
+  /**
+   * Whether to lock the body scroll when modal is open
+   * @default true
+   */
+  lockScroll?: boolean;
+}
+
+export function open(options?: SearchOption | OpenOptions) {
+  // Handle backward compatibility
+  if (options) {
+    // Check if it's the new OpenOptions format
+    if ('searchOptions' in options || 'lockScroll' in options) {
+      const openOptions = options as OpenOptions;
+      searchModalElement.options = openOptions.searchOptions || {};
+      if (openOptions.lockScroll !== undefined) {
+        searchModalElement.lockScroll = openOptions.lockScroll;
+      }
+    } else {
+      // Legacy SearchOption format
+      searchModalElement.options = options;
+    }
+  }
   searchModalElement.open = true;
 }

From d43f84480ed5682aed148b1fb37a85b4d7d1d936 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 19 Nov 2025 15:27:02 +0000
Subject: [PATCH 3/5] Update documentation to describe lockScroll option

Co-authored-by: ruibaby <21301288+ruibaby@users.noreply.github.com>
---
 README.md | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/README.md b/README.md
index d253fe3..fbc2181 100644
--- a/README.md
+++ b/README.md
@@ -64,6 +64,36 @@ halo:
 
 其中，`pluginFinder.available('PluginSearchWidget')` 的作用是判断使用者是否安装和启用了此插件，如果没有安装或者没有启用，那么就不会显示搜索入口。
 
+#### 配置选项
+
+`SearchWidget.open()` 支持传入配置参数：
+
+```javascript
+// 不传参数，使用默认配置
+SearchWidget.open();
+
+// 传入搜索选项（旧版本兼容方式）
+SearchWidget.open({ keyword: '关键词' });
+
+// 传入完整配置（推荐）
+SearchWidget.open({
+  searchOptions: {
+    keyword: '关键词',
+    // 其他搜索选项...
+  },
+  lockScroll: false // 是否锁定页面滚动，默认为 true
+});
+```
+
+**参数说明：**
+
+- `searchOptions`: 搜索 API 的选项参数
+- `lockScroll`: 是否在打开搜索框时锁定页面滚动（隐藏滚动条），默认为 `true`
+  - 设置为 `true` 时，打开搜索框会隐藏页面滚动条（默认行为）
+  - 设置为 `false` 时，打开搜索框不会隐藏页面滚动条，可以避免页面抖动问题
+
+**注意：** 如果你的网站在打开搜索框时出现页面抖动或内容偏移的问题，可以将 `lockScroll` 设置为 `false` 来解决。
+
 ### 自定义样式
 
 虽然目前不能直接为搜索组件编写额外的样式，但可以通过一系列的 CSS 变量来自定义部分样式，开发者可以根据需求自行在主题中添加这些 CSS 变量，让搜索组件和主题更好地融合。

From 93befeabf4a6227f7afc2125c17b661f0f8c5f83 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 19 Nov 2025 15:49:53 +0000
Subject: [PATCH 4/5] Changes before error encountered

Co-authored-by: ruibaby <21301288+ruibaby@users.noreply.github.com>
---
 packages/search-widget/index.html | 38 +++++++++++++++++++++++++++----
 1 file changed, 33 insertions(+), 5 deletions(-)

diff --git a/packages/search-widget/index.html b/packages/search-widget/index.html
index e6f4cec..5bbd5c4 100644
--- a/packages/search-widget/index.html
+++ b/packages/search-widget/index.html
@@ -46,16 +46,44 @@
     </style>
   </head>
   <body>
-    <button>启动</button>
-    <button id="color">暗色/亮色</button>
+    <h1>Search Widget Demo</h1>
+    
+    <div>
+      <button id="open-default">Open Modal (Default - Lock Scroll)</button>
+      <button id="open-no-lock">Open Modal (No Lock Scroll)</button>
+      <button id="color">Toggle Dark/Light Mode</button>
+    </div>
+    
+    <div style="margin-top: 2rem;">
+      <h2>Configuration Examples</h2>
+      <p>Default behavior (lockScroll = true): Page scrollbar is hidden when modal opens</p>
+      <p>With lockScroll = false: Page scrollbar remains visible, preventing page jitter</p>
+    </div>
+    
+    <div style="margin-top: 2rem;">
+      <h3>Long content to enable scrolling</h3>
+      <div style="height: 2000px; background: linear-gradient(to bottom, #f0f0f0, #ffffff);">
+        <p>Scroll down to see the scrollbar...</p>
+      </div>
+    </div>
+    
     <search-modal></search-modal>
   </body>
   <script>
-    const button = document.querySelector('button');
+    const openDefaultBtn = document.getElementById('open-default');
+    const openNoLockBtn = document.getElementById('open-no-lock');
     const searchModal = document.querySelector('search-modal');
 
-    button.addEventListener('click', () => {
-      searchModal.open = !searchModal.open;
+    // Open with default lockScroll (true)
+    openDefaultBtn.addEventListener('click', () => {
+      searchModal.lockScroll = true;
+      searchModal.open = true;
+    });
+
+    // Open with lockScroll = false
+    openNoLockBtn.addEventListener('click', () => {
+      searchModal.lockScroll = false;
+      searchModal.open = true;
     });
 
     const color = document.getElementById('color');

From 1cadad6033d59573e10155d620bfbab8322fd4bb Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 20 Nov 2025 03:04:18 +0000
Subject: [PATCH 5/5] Fix page jitter by compensating for scrollbar width

Co-authored-by: ruibaby <21301288+ruibaby@users.noreply.github.com>
---
 README.md                                  | 30 ----------------
 packages/search-widget/index.html          | 40 +++++++---------------
 packages/search-widget/src/search-modal.ts | 19 +++++-----
 packages/widget/src/index.ts               | 29 ++--------------
 4 files changed, 26 insertions(+), 92 deletions(-)

diff --git a/README.md b/README.md
index fbc2181..d253fe3 100644
--- a/README.md
+++ b/README.md
@@ -64,36 +64,6 @@ halo:
 
 其中，`pluginFinder.available('PluginSearchWidget')` 的作用是判断使用者是否安装和启用了此插件，如果没有安装或者没有启用，那么就不会显示搜索入口。
 
-#### 配置选项
-
-`SearchWidget.open()` 支持传入配置参数：
-
-```javascript
-// 不传参数，使用默认配置
-SearchWidget.open();
-
-// 传入搜索选项（旧版本兼容方式）
-SearchWidget.open({ keyword: '关键词' });
-
-// 传入完整配置（推荐）
-SearchWidget.open({
-  searchOptions: {
-    keyword: '关键词',
-    // 其他搜索选项...
-  },
-  lockScroll: false // 是否锁定页面滚动，默认为 true
-});
-```
-
-**参数说明：**
-
-- `searchOptions`: 搜索 API 的选项参数
-- `lockScroll`: 是否在打开搜索框时锁定页面滚动（隐藏滚动条），默认为 `true`
-  - 设置为 `true` 时，打开搜索框会隐藏页面滚动条（默认行为）
-  - 设置为 `false` 时，打开搜索框不会隐藏页面滚动条，可以避免页面抖动问题
-
-**注意：** 如果你的网站在打开搜索框时出现页面抖动或内容偏移的问题，可以将 `lockScroll` 设置为 `false` 来解决。
-
 ### 自定义样式
 
 虽然目前不能直接为搜索组件编写额外的样式，但可以通过一系列的 CSS 变量来自定义部分样式，开发者可以根据需求自行在主题中添加这些 CSS 变量，让搜索组件和主题更好地融合。
diff --git a/packages/search-widget/index.html b/packages/search-widget/index.html
index 5bbd5c4..627e988 100644
--- a/packages/search-widget/index.html
+++ b/packages/search-widget/index.html
@@ -46,44 +46,30 @@
     </style>
   </head>
   <body>
-    <h1>Search Widget Demo</h1>
-    
-    <div>
-      <button id="open-default">Open Modal (Default - Lock Scroll)</button>
-      <button id="open-no-lock">Open Modal (No Lock Scroll)</button>
-      <button id="color">Toggle Dark/Light Mode</button>
-    </div>
+    <h1>Search Widget - Page Jitter Fix Test</h1>
+    <button>Open Search Modal</button>
+    <button id="color">Toggle Dark/Light Mode</button>
     
     <div style="margin-top: 2rem;">
-      <h2>Configuration Examples</h2>
-      <p>Default behavior (lockScroll = true): Page scrollbar is hidden when modal opens</p>
-      <p>With lockScroll = false: Page scrollbar remains visible, preventing page jitter</p>
+      <h2>Testing the Fix</h2>
+      <p>This page has enough content to show a scrollbar. When you open the search modal, the page should NOT shift to the right.</p>
+      <p>The fix works by calculating the scrollbar width and adding equivalent padding to compensate for the scrollbar removal.</p>
     </div>
     
-    <div style="margin-top: 2rem;">
-      <h3>Long content to enable scrolling</h3>
-      <div style="height: 2000px; background: linear-gradient(to bottom, #f0f0f0, #ffffff);">
-        <p>Scroll down to see the scrollbar...</p>
-      </div>
+    <!-- Add enough content to ensure scrollbar appears -->
+    <div style="height: 2000px; background: linear-gradient(to bottom, #f0f0f0, #e0e0e0);">
+      <p style="padding: 2rem;">Long content to ensure scrollbar is visible...</p>
+      <p style="padding: 2rem;">Notice that when the modal opens, there's no layout shift!</p>
     </div>
     
     <search-modal></search-modal>
   </body>
   <script>
-    const openDefaultBtn = document.getElementById('open-default');
-    const openNoLockBtn = document.getElementById('open-no-lock');
+    const button = document.querySelector('button');
     const searchModal = document.querySelector('search-modal');
 
-    // Open with default lockScroll (true)
-    openDefaultBtn.addEventListener('click', () => {
-      searchModal.lockScroll = true;
-      searchModal.open = true;
-    });
-
-    // Open with lockScroll = false
-    openNoLockBtn.addEventListener('click', () => {
-      searchModal.lockScroll = false;
-      searchModal.open = true;
+    button.addEventListener('click', () => {
+      searchModal.open = !searchModal.open;
     });
 
     const color = document.getElementById('color');
diff --git a/packages/search-widget/src/search-modal.ts b/packages/search-widget/src/search-modal.ts
index f691516..f50027d 100644
--- a/packages/search-widget/src/search-modal.ts
+++ b/packages/search-widget/src/search-modal.ts
@@ -19,9 +19,6 @@ export class SearchModal extends LitElement {
   @property({ type: Object })
   options = {};
 
-  @property({ type: Boolean })
-  lockScroll = true;
-
   constructor() {
     super();
 
@@ -45,12 +42,18 @@ export class SearchModal extends LitElement {
       return;
     }
 
-    if (this.lockScroll) {
-      if (this.open) {
-        document.body.style.overflow = 'hidden';
-      } else {
-        document.body.style.removeProperty('overflow');
+    if (this.open) {
+      // Calculate scrollbar width to prevent layout shift
+      const scrollbarWidth =
+        window.innerWidth - document.documentElement.clientWidth;
+      document.body.style.overflow = 'hidden';
+      // Add padding to compensate for scrollbar removal
+      if (scrollbarWidth > 0) {
+        document.body.style.paddingRight = `${scrollbarWidth}px`;
       }
+    } else {
+      document.body.style.removeProperty('overflow');
+      document.body.style.removeProperty('padding-right');
     }
   }
 
diff --git a/packages/widget/src/index.ts b/packages/widget/src/index.ts
index 17df34d..6155095 100644
--- a/packages/widget/src/index.ts
+++ b/packages/widget/src/index.ts
@@ -10,32 +10,7 @@ const searchModalElement = document.createElement(
 
 document.body.append(searchModalElement);
 
-export interface OpenOptions {
-  /**
-   * Search options for the search API
-   */
-  searchOptions?: SearchOption;
-  /**
-   * Whether to lock the body scroll when modal is open
-   * @default true
-   */
-  lockScroll?: boolean;
-}
-
-export function open(options?: SearchOption | OpenOptions) {
-  // Handle backward compatibility
-  if (options) {
-    // Check if it's the new OpenOptions format
-    if ('searchOptions' in options || 'lockScroll' in options) {
-      const openOptions = options as OpenOptions;
-      searchModalElement.options = openOptions.searchOptions || {};
-      if (openOptions.lockScroll !== undefined) {
-        searchModalElement.lockScroll = openOptions.lockScroll;
-      }
-    } else {
-      // Legacy SearchOption format
-      searchModalElement.options = options;
-    }
-  }
+export function open(options: SearchOption) {
+  searchModalElement.options = options;
   searchModalElement.open = true;
 }