如何在Elementor中实现可滚动Scroll modal popup弹窗

方法一：使用Elementor Pro原生弹窗功能（无代码，优先推荐） #

• 新建弹窗模板：进入WordPress后台「模板」-「弹窗」菜单，新建弹窗，先配置好弹窗宽度、遮罩、关闭按钮等基础参数
• 配置弹窗滚动规则：选中弹窗最外层包裹容器，在左侧编辑栏找到「高级」-「布局」设置项，将溢出处理选项设置为「自动滚动」，同时给弹窗设置最大高度：桌面端建议设为80vh（即视口高度的80%），移动端建议设为90vh，避免弹窗完全遮挡屏幕
• 正常排版内部内容：直接往弹窗内添加文本、图片、表单等需要的内容即可，当内容总高度超过你设置的弹窗最大高度时，会自动生成纵向滚动条，支持滑动查看全部内容
• 注意事项：不要给弹窗内部的独立内容区块设置固定高度，否则容易出现双滚动条的异常问题

方法二：免费版无弹窗组件时，用自定义CSS实现 #

如果你用的是Elementor免费版，没有自带弹窗功能，用第三方弹窗组件/自定义弹窗结构时，可以通过加少量CSS实现滚动效果：

• 先搭建好弹窗的基础结构，确认弹窗内容容器的CSS选择器
• 将以下代码添加到WordPress后台「外观」-「自定义」-「额外CSS」栏中保存即可：

/* 替换成你自己的弹窗内容容器选择器 */
.your-modal-content-selector {
  max-height: 80vh; /* 可根据设计需求调整高度比例 */
  overflow-y: auto;
  overscroll-behavior: contain; /* 阻止滚动穿透，避免滑到弹窗底部时背后页面跟着滚动 */
}

/* 可选：自定义滚动条样式，适配弹窗设计风格 */
.your-modal-content-selector::-webkit-scrollbar {
  width: 6px;
}
.your-modal-content-selector::-webkit-scrollbar-thumb {
  background-color: #dcdcdc;
  border-radius: 3px;
}

常见问题排查 #

如果配置完滚动条不生效，优先检查弹窗的上级容器是否设置了overflow: hidden属性，将该属性改为overflow: visible即可正常触发滚动。另外不要给弹窗容器设置position: sticky定位，会破坏原生滚动逻辑。

效果参考：

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