2019-08-06

探究-webkit-overflow-scrolling

探究-webkit-overflow-scrolling：
-webkit-overflow-scrolling:touch的bug ios微信公众号对话页内容消失|闪屏|连带拖动

问题描述：

ios设备上，微信公众号菜单跳转对话页，往下拖动页面内容会短暂消失，拖住不动页面会“闪”回顶端，拖动过程偶发底部输入框被连带着一起拖动。

解决过程

看了下同事之前写的代码，发现了一句-webkit-overflow-scrolling:touch，感觉是这个原因，开始面向谷歌编程。

bug点以及对应策略收集:

兼容写法：前面加一句 overflow: auto
如果添加了此属性但是不起作用，再添加overflow-y: scroll
当一个元素设置过position: absolute|relative，后再增加-webkit-overflow-scrolling: touch;属性后，会发现，滑动几次后就滚动区域会卡住，不能在滑动，这时给元素增加个z-index值
/建议：将该属性挂在body上可以避免很多奇怪的bug/

body{-webkit-overflow-scrolling:touch;}

/局部滚动的DOM节点/

.scroll-el{overflow-y:auto;}

隐藏滚动条

::-webkit-scrollbar {

display: none;

}
在苹果手机上使用-webkit-overflow-scrolling:touch会导致使用固定定位的元素，随着页面一起滚动，只有滚动停止时才会恢复原位
1. 使用overflow-y属性的元素不应该和固定元素在一个层级，使用overflow-y属性的元素外面加一层和固定元素在同一层级可以解决该问题
2. overflow-y: auto; 和 -webkit-overflow-scrolling: touch; 冲突了出现了两个滚动条把 overflow-y: auto; 注释掉
实现一个布局为header、main、bottom的布局，其中头部和底部通过fixed固定，中间部分通过滚动条滑动

如果目的是实现只要中间的内容超过屏幕高度时，中间内容会自动滚动的效果的话，main部分加上上下的padding，然后不需要自己添加任何滚动条属性，当超出高度时，body会自动产生滚动条。这样我们的目的其实是实现了的。

但是在safari上，当超出高度，页面往下滑时，浏览器底部的工具栏会随着页面一起晃动（向下滚动时会拉起底部工具栏），造成了很不好的体验。所以我们想在中间的main部分加一个独立的滚动条
1
2
3
4
5
6
7
8
9
html, body {
height: 100%;
}
main {
padding: 50px 0;
height: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
- 如果出现偶尔卡住不动的情况，那么在使用该属性的元素上不设置定位或者手动设置定位为static
- 如果添加动态内容页面不能滚动，在webkit-overflow-scrolling:touch属性的下一层子元素上，将height加1%或1px。从而主动触发scrollbar。
- css属性为overflow:auto的元素, 设置-webkit-overflow-scrolling:touch, 如果此元素内容有position:relative的元素, 当页面加载过程中, 如果滚动页面, 有几率会触发bug
  
  bug表现为页面内容消失, 但是查看DOM时, 所有DOM依然存在于页面中
  
  页面中的图片, 文本框什么的, 也依旧能够发挥作用. 如果在相应的位置长按, 依然能够呼起操作选项, 但是就是看不到
  
  在设置了position:relative的子元素上, 使用transform: translate3d(0,0,0), 或者省事的做法, 使用*将所有子元素都设置transform: translate3d(0,0,0)使用translate3d强制开启硬件加速解决问题