VUE项目IOS浏览器overflow:scroll overflow:auto无法滚动


最近做了一个vue项目,在其中做了一个冻结首行首列的表格,而在数据滚动区域在IOS浏览器上滑动不了,有的机型则是滑动不流畅很卡顿。外层用一个大的div将所有需要滚动的内容框起来。宽高皆为100%,overflow:scroll。首行作为一块数据区域,属性为absolute,首列作为一快数据区域属性也为absolute,中间数据区域absolute,overflow:scroll。经过测试在安卓上顺畅,但是到IOS上就卡顿甚至滑不动。


问题描述: 此bug出现需要条件:父元素需使用绝对定位absolute或固定定位fixed,使用overflow: scroll / auto(或overflow-y: scroll / auto),内部子元素是动态大小(例如较大的svg document,近似为内嵌iframe,等等)。iOS safari 会将overflow:scroll的元素识别为一个单独的 ScrollView,并予以一个 -webkit-overflow-scrolling 属性为auto。而safari中的网页本身就是一个大的ScrollView,在关于 -webkit-overflow-scrolling:Safari CSS Reference官方是这样描述的:脱离文档流的定位时,子元素的高度如果没有在ScrollView建立之前确定,就不会触发内部滑动,而会触发外部滑动。

解决方案:1、必须为所有在移动端的overflow: scroll元素增加属性 -webkit-overflow-scrolling: touch;当父元素可不脱离文档流时不要脱离文档流。如以上没有解决,则给予子元素一个min-height,大小不限(略大于效果最好),帮助safari建立ScrollView。

css代码加上之后解决问题。

参考链接: https://segmentfault.com/a/1190000012761272

你可能感兴趣的:(VUE项目IOS浏览器overflow:scroll overflow:auto无法滚动)