博客

前几天做完一个调查问卷的页面，客户反馈说果机出现了页面卡顿问题，第一反应是没加下面这行代码：

		webkit-overflow-scrolling: touch;

这行代码是ios独有的属性，解决页面滑动卡顿好用的一批。

但是经过我的排查，用加班时间搞代码，才发现并不是这行代码的锅，对8起，我冤枉你了！

经过自己测试发现是点击输入框之后，input失去焦点时让页面的scrollTop为0，造成的页面卡顿，解决办法就是在js里加下面这行代码：

$("input,select,textarea").blur(function(){
        setTimeout(() => {
            const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
            window.scrollTo(0, Math.max(scrollHeight - 1, 0));
        }, 100);
    });

这行代码会在input失去焦点后自动填充scrollTop，自动修复为0的bug，发现这个问题的时候，我都快哭了，下班后找了三个小时哇，就这么几行代码能解决的事情，我竟然花了三个小时，果然我还是菜。

有的时候这行代码放的位置有讲究，可以放到h5页面的script标签里，也可以放在引用的Js文件里，至于放哪里，看你个人需要咯!