Fix page jitter by compensating for scrollbar width (#63)

Copilot · web-flow · commit 104a97292d1a · 2025-11-20T03:27:01.000Z
Fixes the page jitter/shake issue when the search modal opens by compensating for the scrollbar width, following the same approach as VitePress. ## Problem When the search modal opens, hiding the body scrollbar caused the page content to shift to the right, creating a jarring visual effect. ## Solution Instead of adding a configuration option, this implements the standard fix by: 1. Calculating the scrollbar width: `window.innerWidth - document.documentElement.clientWidth` 2. Adding `padding-right` equal to the scrollbar width when hiding body overflow 3. Removing the padding when restoring overflow This ensures the page content stays in the exact same position when the modal opens and closes. ## Changes Made - Modified `search-modal.ts` `willUpdate` method to calculate and apply padding compensation - Updated demo page (`index.html`) to demonstrate the fix with scrollable content - No configuration needed - works automatically for all users - No breaking changes ## Visual Proof **Before opening modal** (with scrollbar): ![Before](https://github.com/user-attachments/assets/08830eed-5046-486a-aa59-0cad4f04ca5c) **After opening modal** (no layout shift): ![After](https://github.com/user-attachments/assets/1873d6c0-10d4-498a-9794-bef44963dc1e) ✅ **The page content stays perfectly aligned - no jitter or shift!** ## Testing - ✅ Build passes successfully - ✅ Linting passes - ✅ Security scan passed (0 alerts) - ✅ Visual verification confirms no layout shift Fixes #62  <details> <summary>Original prompt</summary> > > ---- > > *This section details on the original issue you should resolve* > > <issue_title>搜索组件导致页面抖动问题</issue_title> > <issue_description><img width="1162" height="499" alt="Image" src="https://github.com/user-attachments/assets/fa12a3c0-fd05-4725-aa70-49eebc8d2512" /> > > 页面滚动条隐藏导致整体页面内容右移： > > <img width="1195" height="496" alt="Image" src="https://github.com/user-attachments/assets/24c2a80d-c997-49b2-97d9-6a06741765ff" /> > > 参考 [vitepress 实例](https://howiehz.top/halo-theme-higan-haozi/guide/style-reference)，搜索组件显示不会导致页面滚动条隐藏： > > <img width="1366" height="899" alt="Image" src="https://github.com/user-attachments/assets/3a88707c-27c2-4b5f-8e3d-9d032395fd37" /> > > 希望提供配置项，决定是否隐藏滚动条，谢谢❤。 > </issue_description> > > ## Comments on the Issue (you are @copilot in this section) > > <comments> > <comment_new><author>@ruibaby</author><body> > /kind improvement > </body></comment_new> > </comments> > </details> - Fixes #62  --- 💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more [Copilot coding agent tips](https://gh.io/copilot-coding-agent-tips) in the docs. ```release-note 减少当搜索框打开时，网页整体的抖动问题 ```
diff --git a/packages/search-widget/index.html b/packages/search-widget/index.html
@@ -46,8 +46,22 @@
     </style>
   </head>
   <body>
-    <button>启动</button>
-    <button id="color">暗色/亮色</button>
+    <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>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>
+    
+    <!-- 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>
diff --git a/packages/search-widget/src/search-modal.ts b/packages/search-widget/src/search-modal.ts
@@ -43,9 +43,17 @@ export class SearchModal extends LitElement {
     }
 
     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');
     }
   }
 

Original file line number	Diff line number	Diff line change
`@@ -43,9 +43,17 @@ export class SearchModal extends LitElement {`
`43`	`43`	`}`
`44`	`44`
`45`	`45`	`if (this.open) {`
	`46`	`+ // Calculate scrollbar width to prevent layout shift`
	`47`	`+ const scrollbarWidth =`
	`48`	`+ window.innerWidth - document.documentElement.clientWidth;`
`46`	`49`	`document.body.style.overflow = 'hidden';`
	`50`	`+ // Add padding to compensate for scrollbar removal`
	`51`	`+ if (scrollbarWidth > 0) {`
	`52`	+ document.body.style.paddingRight = `${scrollbarWidth}px`;
	`53`	`+ }`
`47`	`54`	`} else {`
`48`	`55`	`document.body.style.removeProperty('overflow');`
	`56`	`+ document.body.style.removeProperty('padding-right');`
`49`	`57`	`}`
`50`	`58`	`}`
`51`	`59`