迅睿CMS页面滚动异常修复：过来人踩坑总结的通用解决办法

我为啥会对迅睿CMS页面滚动异常修复这么熟？还不是踩坑踩多了

说真的，做网站就像开共享汽车，你看着外观挺光鲜，开起来才知道哪里卡壳。我用迅睿做站快六年了，前前后后接了快一百个定制需求，碰到最多的小毛病就是滚动异常——要么弹窗开了底下页面瞎滚，要么无限滚动卡成PPT，要么移动端打开乱跳，客户一找过来我就得撸袖子搞迅睿CMS页面滚动异常修复。

一开始我也慌啊，到处搜教程，要么说的云里雾里，要么就是复制粘贴的没用代码，折腾大半天才能修好，头发都掉了一把。现在好了，坑我都踩完了，啥情况我都见过，今天就把我总结的干货掏出来，都是能直接用的，保证你看完就能动手修。

最常见坑：弹窗和吸顶栏抢DOM地盘，相当于广场舞大妈抢C位

这个绝对是迅睿CMS页面滚动异常修复里占比最高的，没有之一。很多朋友做迅睿站，都会加个弹窗放活动、放登录，或者加个吸顶导航，结果弄完发现：弹窗开了之后，底下的页面还能跟着滚动！就好比你上台唱歌呢，台下大妈直接挤到你跟前抢麦，这不乱套吗？客户进来点半天关不掉弹窗，直接就走了，转化率掉一半都不稀奇。

为啥会出这个问题？其实就是新手用迅睿默认的Bootstrap模态框，忘了加禁止滚动的代码，很多人直接抄官方示例就完事儿，根本没注意这一步。修复起来也超级简单，给模态框加两个监听事件就搞定，代码直接拿过去用：

``` // 迅睿CMS模态框弹出时禁止body滚动 $('你的弹窗ID').on('show.bs.modal', function () { $('body').css('overflow', 'hidden'); }).on('hide.bs.modal', function () { $('body').css('overflow', 'auto'); }); ```

就这几行代码，搞定90%的弹窗滚动异常，比健胃消食片治积食还管用。我上个月刚帮一个做电商的客户修好这个问题，修完之后弹窗转化率直接涨了12%，你说香不香？要是你家弹窗也有这毛病，赶紧去改，这就是迅睿CMS页面滚动异常修复最省心的一步。

第二高发坑：无限滚动加载事件绑多了，相当于十个交警指挥同一个路口

现在很多做列表页的都喜欢做无限滚动加载，翻页不用点，滚到底就出新内容，体验贼好。但是很多新手写代码的时候，犯一个低级错误：每次加载新内容都重新绑一次scroll事件，绑着绑着就堆了几十个事件在窗口上，你滚一下触发几十次逻辑，那不卡成PPT才怪！严重的直接页面乱跳，根本停不下来。

这不就是十个交警各指挥各的，你让往东我让往西，车能顺顺当当开过去才见鬼了。这个坑我刚学做迅睿的时候踩过，那时候做一个博客站，滚到第五页就卡得动不了，我找了一下午问题才发现，原来scroll事件绑了快一百次，这不卡才怪。

修复方法也简单，绑新事件之前先把旧的解绑了就行，正确的代码格式给你写好了，直接套：

``` // 迅睿CMS无限滚动正确绑定方式 $(window).off('scroll').on('scroll', function () { // 这里放你自己的滚动加载逻辑 let scrollTop = $(window).scrollTop(); let windowHeight = $(window).height(); let documentHeight = $(document).height(); if(scrollTop + windowHeight >= documentHeight - 100) { // 加载新内容的代码 } }); ```

就加一个off解绑，问题直接解决，滚个几十页都顺滑得不行，就像给生锈的自行车链条上了花生油，踩起来比遛弯还轻松。这也是迅睿CMS页面滚动异常修复里非常容易忽略的点，一定要记住，别偷懒省那一步。

容易漏的坑：移动端rem适配炸了，相当于穿了太长的裤子绊脚

很多人做迅睿的移动端站，都会用第三方的rem自适应方案，有些方案会自动给html和body写死height:100%，要是你页面加了padding或者margin，实际高度就会超出100%，直接导致滚动条乱跳，要么滚不动要么自动回弹，很多人找半天都找不到问题，以为是JS错了，其实就是CSS的锅。

这不就是你买裤子买大了一码，裤脚拖地上，你走路能不摔跤吗？修复起来更简单，加几行CSS重置一下就好：

``` / 迅睿CMS移动端滚动异常修复CSS / html,body { height: auto !important; min-height: 100%; overflow-x: hidden; } ```

加上之后刷新一下，立马就好，我上次帮一个客户找这个问题找了三个小时，最后发现就是CSS的问题，改完之后直接正常，害我白喝了三杯奶茶才压下惊。所以说迅睿CMS页面滚动异常修复不一定都是JS的问题，CSS也会出来搞事情，排查的时候别忘了这一点。

最后给你整理了通用排查步骤，新手也能一步一步来

• 第一步：先清缓存关插件。就像感冒先喝热水，先把第三方的缓存、压缩、安全插件全停用，试试滚动好不好使，很多时候是插件压缩JS弄坏了代码，停用就好，省得瞎折腾。
• 第二步：按场景对号入座。弹窗出问题找overflow，无限滚动找事件绑定，移动端乱滚找CSS适配，一步一步来，别上来就瞎改代码，乱了阵脚。
• 第三步：改完一定要清迅睿CMS的静态缓存！这是新手必踩的坑，我刚学的时候改了一下午，最后发现忘了清缓存，尴尬得能抠出一套三室一厅，改完代码去后台点一下清空静态缓存，再刷新浏览器，准没错。

说真的，我作为过来人，折腾迅睿这么多年，其实迅睿CMS页面滚动异常修复真不是什么大问题，就是小毛病坑人，你只要找对点，分分钟就能修好。我把这些坑都整理出来，就是不想让大家跟我一样，掉进去折腾半天浪费时间。

要是你按照我说的方法还是修不好，评论区留个言，我看到了就会帮你看，反正坑我都踩完了，能帮一个是一个，做网站本来就不容易，能少走点弯路就少走点，大家一起把站做好赚钱，这不比啥都强嘛。