解决ios微信移动端的position: fixed; 支持性不好的问题 && 禁用下拉暴露黑底的功能

Posted 2020-09-21 Wayne Zhu

解决ios、微信移动端的position: fixed; 支持性不好的问题

　　在chrome中的多个部分使用了position: fixed之后，都可以正常的布局，但是放在微信上却出现了不能正常显示的问题（第一个问题）。 

　　并且使用了postion: fixed; 的一个种类名称栏在微信下下滑不了，而body是可以的，确实让人很郁闷（第二个问题）。

　　对于第二个问题，我们可以采取的方式是使得微信不能下滑暴露出 powered by ... 的字样。 但是对于第一个问题，确实没有很好的解决方法。 所以就在网上找了相关的资料，希望可以借鉴成功。

　　

相关问题一：Web移动端Fixed布局的解决方案

　　这个问题中提到的问题是对于fixed布局的页面，如果同时又有input框获取焦点，本身没有问题，但是软键盘一旦起来，就会出现问题了。 

　　解决办法：避免input和fixed的联合使用， 使用iscroll.js这种第三方库也可以可以解决的。 

 

相关问题二（推荐）：移动端web页面使用position:fixed问题总结

　　解决了部分浏览器不支持fixed、focus出错等问题。 

 

相关问题三： 关于苹果手机微信端 position: fixed定位top导航栏问题

　　同样也是与input获取焦点的相关问题。

 

相关问题四： fixed在微信下的BUG

　　与-webkit-overflow-scrolling有关。

 

 

 

 

禁用下拉暴露黑底的功能

　　https://github.com/yuanzm/preventoverscrolljs