Fix the page flickers when the search dialog pops up (#860)

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 {

source/js/third-party/search/algolia-search.js

@@ -100,6 +100,7 @@ document.addEventListener('DOMContentLoaded', () => {
   // Handle and trigger popup window
   document.querySelectorAll('.popup-trigger').forEach(element => {
     element.addEventListener('click', () => {
+      NexT.utils.setGutter();
       document.body.classList.add('search-active');
       // Wait for search-popup animation to complete
       setTimeout(() => input.focus(), 500);
@@ -108,6 +109,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // Monitor main search box
   const onPopupClose = () => {
+    NexT.utils.setGutter('0');
     document.body.classList.remove('search-active');
   };
 
@@ -121,6 +123,7 @@ document.addEventListener('DOMContentLoaded', () => {
   window.addEventListener('keydown', event => {
     if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
       event.preventDefault();
+      NexT.utils.setGutter();
       document.body.classList.add('search-active');
       setTimeout(() => input.focus(), 500);
     }

source/js/third-party/search/local-search.js

@@ -1,4 +1,4 @@
-/* global CONFIG, pjax, LocalSearch */
+/* global CONFIG, NexT, pjax, LocalSearch */
 
 document.addEventListener('DOMContentLoaded', () => {
   if (!CONFIG.path) {
@@ -57,6 +57,7 @@ document.addEventListener('DOMContentLoaded', () => {
   // Handle and trigger popup window
   document.querySelectorAll('.popup-trigger').forEach(element => {
     element.addEventListener('click', () => {
+      NexT.utils.setGutter();
       document.body.classList.add('search-active');
       // Wait for search-popup animation to complete
       setTimeout(() => input.focus(), 500);
@@ -66,6 +67,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
   // Monitor main search box
   const onPopupClose = () => {
+    NexT.utils.setGutter('0');
     document.body.classList.remove('search-active');
   };
 
@@ -82,6 +84,7 @@ document.addEventListener('DOMContentLoaded', () => {
   window.addEventListener('keydown', event => {
     if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
       event.preventDefault();
+      NexT.utils.setGutter();
       document.body.classList.add('search-active');
       setTimeout(() => input.focus(), 500);
       if (!localSearch.isfetched) localSearch.fetchData();

source/js/utils.js

@@ -442,6 +442,18 @@ NexT.utils = {
     window.addEventListener('scroll', updateFooterPosition, { passive: true });
   },
 
+  /**
+   * 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.
+   */
+  setGutter(gap) {
+    document.body.style.setProperty('--dialog-scrollgutter', gap || `${window.innerWidth - document.body.clientWidth}px`);
+  },
+
   getScript(src, options = {}, legacyCondition) {
     if (typeof options === 'function') {
       return this.getScript(src, {