diff --git a/source/css/_common/components/third-party/search.styl b/source/css/_common/components/third-party/search.styl
index 5b229ad2c..be6f3ef92 100644
--- a/source/css/_common/components/third-party/search.styl
+++ b/source/css/_common/components/third-party/search.styl
@@ -1,6 +1,7 @@
 if (hexo-config('local_search.enable') or hexo-config('algolia_search.enable')) {
   .search-active {
     overflow: hidden;
+    margin-right: var(--dialog-scrollgutter, 0);
   }
 
   .search-pop-overlay {
diff --git a/source/css/_common/scaffolding/base.styl b/source/css/_common/scaffolding/base.styl
index abf962208..329d1bbdf 100644
--- a/source/css/_common/scaffolding/base.styl
+++ b/source/css/_common/scaffolding/base.styl
@@ -17,7 +17,6 @@ body {
   min-height: 100%;
   position: relative;
   transition: padding $transition-ease;
-
   if (hexo-config('body_scrollbar.overlay')) {
     overflow-x: hidden;
     @supports (overflow-x: clip) {
diff --git a/source/js/third-party/search/algolia-search.js b/source/js/third-party/search/algolia-search.js
index 6a0707893..502acd677 100644
--- a/source/js/third-party/search/algolia-search.js
+++ b/source/js/third-party/search/algolia-search.js
@@ -23,6 +23,19 @@ document.addEventListener('DOMContentLoaded', () => {
   let isSearching = false;
   let pendingQuery = null;
 
+  /**
+   * Sets the CSS variable '--dialog-scrollgutter' to the specified gap value.
+   * If no gap is provided, it calculates the gap as the difference between
+   * the window's inner width and the document body's client width.
+   *
+   * @param {string} [gap] - The gap value to be set. If not provided, the
+   *                         default gap is calculated automatically.
+   */
+  const setGutter = gap => {
+    const gutter = gap || `${window.innerWidth - document.body.clientWidth}px`;
+    document.body.style.setProperty('--dialog-scrollgutter', gutter);
+  };
+
   const searchAlgolia = async(searchText, page = 0) => {
     if (isSearching) {
       pendingQuery = { searchText, page };
@@ -96,6 +109,7 @@ document.addEventListener('DOMContentLoaded', () => {
   // Handle and trigger popup window
   document.querySelectorAll('.popup-trigger').forEach(element => {
     element.addEventListener('click', () => {
+      setGutter();
       document.body.classList.add('search-active');
       // Wait for search-popup animation to complete
       setTimeout(() => input.focus(), 500);
@@ -104,6 +118,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // Monitor main search box
   const onPopupClose = () => {
+    setGutter('0');
     document.body.classList.remove('search-active');
   };
 
@@ -117,6 +132,7 @@ document.addEventListener('DOMContentLoaded', () => {
   window.addEventListener('keydown', event => {
     if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
       event.preventDefault();
+      setGutter();
       document.body.classList.add('search-active');
       setTimeout(() => input.focus(), 500);
     }
diff --git a/source/js/third-party/search/local-search.js b/source/js/third-party/search/local-search.js
index 1241f9278..ff0744066 100644
--- a/source/js/third-party/search/local-search.js
+++ b/source/js/third-party/search/local-search.js
@@ -15,6 +15,18 @@ document.addEventListener('DOMContentLoaded', () => {
   const input = document.querySelector('.search-input');
   const container = document.querySelector('.search-result-container');
 
+  /**
+   * Sets the CSS variable '--dialog-scrollgutter' to the specified gap value.
+   * If no gap is provided, it calculates the gap as the difference between
+   * the window's inner width and the document body's client width.
+   *
+   * @param {string} [gap] - The gap value to be set. If not provided, the
+   *                         default gap is calculated automatically.
+   */
+  const setGutter = gap => {
+    document.body.style.setProperty('--dialog-scrollgutter', gap || `${window.innerWidth - document.body.clientWidth}px`);
+  };
+
   const inputEventFunction = () => {
     if (!localSearch.isfetched) return;
     const searchText = input.value.trim().toLowerCase();
@@ -57,6 +69,7 @@ document.addEventListener('DOMContentLoaded', () => {
   // Handle and trigger popup window
   document.querySelectorAll('.popup-trigger').forEach(element => {
     element.addEventListener('click', () => {
+      setGutter();
       document.body.classList.add('search-active');
       // Wait for search-popup animation to complete
       setTimeout(() => input.focus(), 500);
@@ -66,6 +79,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // Monitor main search box
   const onPopupClose = () => {
+    setGutter('0');
     document.body.classList.remove('search-active');
   };
 
@@ -82,6 +96,7 @@ document.addEventListener('DOMContentLoaded', () => {
   window.addEventListener('keydown', event => {
     if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
       event.preventDefault();
+      setGutter();
       document.body.classList.add('search-active');
       setTimeout(() => input.focus(), 500);
       if (!localSearch.isfetched) localSearch.fetchData();