Elementor构建WordPress站点：弹窗触发页面右移问题求助

Hey there, sorry to hear you’ve spent all day stuck on this—let’s break down what’s causing that annoying page shift and fix it!

最可能的核心原因：滚动条隐藏引发的宽度变化 #

When Elementor’s modal pops up, it usually adds overflow: hidden to the <body> tag to stop users from scrolling the background content. If your page had a vertical scrollbar before the modal opened, that scrollbar takes up roughly 17px of width by default. When it disappears, the page expands to fill that empty space, causing the rightward shift. Closing the modal brings the scrollbar back, so the page shifts left again.

具体解决方案： #

• 用CSS抵消滚动条宽度
  Add this custom CSS to your site (via Appearance > Customize > Additional CSS, or Elementor’s built-in custom CSS panel):

  /* Fix page shift when Elementor modal opens */
  body.elementor-modal-open {
      padding-right: 17px; /* Matches default browser scrollbar width */
      overflow: hidden;
  }
  

  If your site uses custom-styled scrollbars, adjust the 17px value to match your scrollbar’s actual width. For a dynamic approach that auto-calculates the width:

  :root {
      --scrollbar-width: calc(100vw - 100%);
  }
  
  body.elementor-modal-open {
      padding-right: var(--scrollbar-width);
      overflow: hidden;
  }
  

• 调整Elementor弹窗的后台滚动设置
  Open your modal in the Elementor editor, go to the Advanced tab, and look for settings related to "Background Scroll" or "Body Overflow". Enabling "Allow Background Scroll" will stop Elementor from adding overflow: hidden to the body, eliminating the shift entirely. Note that this lets users scroll the background while the modal is open, so choose based on your UX needs.

• 修复固定头部的样式问题
  Since you’re using Elementor Header Footer Builder for your fixed header, make sure the header has these CSS rules to prevent it from shifting with the page:

  .your-header-class {
      width: 100%;
      right: 0;
      position: fixed;
  }
  

  Replace .your-header-class with the actual class of your header (find it by inspecting the header element with your browser’s dev tools).

• 排查CSS冲突
  Use your browser’s dev tools (press F12) to inspect the <body> element when the modal is open. Look for added classes like elementor-modal-open and check what CSS rules are applied to them. Sometimes other plugins or your theme might add conflicting margin/padding styles that worsen the shift—you can override these in your custom CSS.

内容的提问来源于stack exchange，提问作者Anson