Fix page jitter by compensating for scrollbar width

Copilot · ruibaby · Copilot · commit 1cadad6033d5 · 2025-11-20T03:04:18.000Z
Co-authored-by: ruibaby &lt;21301288+ruibaby@users.noreply.github.com&gt;
diff --git 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
@@ -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
@@ -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
@@ -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;
 }
