You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

WordPress移动端展开汉堡菜单后页面无法滚动问题求助

WordPress移动端展开汉堡菜单后页面无法滚动问题求助

兄弟,我之前帮客户排查过Hestia主题同款的移动端菜单滚动问题,大概率是主题在菜单展开时给页面body加了禁止滚动的属性,而iPhone的Safari对这类属性的渲染逻辑有点特殊,给你几个亲测有效的解决思路:

  • 先查主题自带设置(最简单的方法)
    很多现代主题都会自带「菜单展开时锁定页面滚动」的开关,你可以去后台「外观→自定义→头部/导航」板块里找找,有没有类似「Mobile Menu Open: Lock Body Scroll」这类选项,要是开着就关掉试试,大部分情况下这就能解决问题。

  • 用自定义CSS强制修复
    如果主题设置里没这个选项,就直接加自定义CSS覆盖:

    1. 先确认菜单展开时body的类名:你可以用Chrome的设备模拟器(按F12→点击手机图标)打开移动端视图,展开菜单后,在Elements面板里看body标签多了什么类(Hestia主题一般是hestia-mobile-menu-open)。
    2. 进入后台「外观→自定义→额外CSS」,粘贴这段代码:
    body.hestia-mobile-menu-open {
        overflow: auto !important;
        position: relative !important;
    }
    

    原理:Hestia默认会给展开菜单的body设overflow: hidden+position: fixed来锁定滚动,但iPhone上fixed定位会触发奇怪的滚动bug,强制改成overflow: autoposition: relative就能让页面正常滚动,同时菜单本身是固定在顶部的,完全不影响操作菜单。

  • 排查插件冲突
    有时候第三方插件(比如缓存、广告、性能优化类)会篡改body的滚动属性,和主题菜单脚本冲突。你可以先临时禁用所有非必需插件,测试菜单展开后能不能滚动:如果能,就一个个重新启用插件,找到冲突的那个,要么换替代插件,要么给插件加主题脚本的排除规则。

  • 更新主题和WordPress核心
    别忽略这个基础操作!有时候这就是主题的已知bug,官方在后续版本里已经修复了。去后台「仪表盘→更新」里,把Hestia主题和WordPress核心更到最新稳定版,很多小问题更新完就自动消失了。

如果以上方法都没解决,你可以试试用子主题修改主题的菜单JS文件(不建议直接改父主题,不然更新会丢代码):Hestia的移动端菜单逻辑一般在assets/js/front.js里,找到控制菜单展开的函数,把里面设置body.style.overflow = 'hidden'的代码注释掉,改成overflow: 'auto'就行,这个需要点基础JS知识,记得用子主题操作哦!

火山引擎 最新活动