scroll-view超出屏幕的内容显示为空白的问题
发布于 7 年前 作者 dugang 18950 次浏览 来自 问答

水平滚动的scroll-view,当内容过高、下方超出屏幕范围时,超出的内容显示为空白。效果如下:

–>

左图下方有超出屏幕的内容,把页面上滚看到本该有(表格线和文字)内容的显示为大片空白。

表格右侧的内容是放到scroll-view里的,目的是有多列时可以水平滚动而保持左侧标题不动。如果放到普通view里就不会因超出屏幕而显示不出来了。

而且,这个问题在开发工具和安卓下才出现,iOS下没问题。

2 回复

查出原因了,是因为整个页面是flex collumn布局,下面表格作为flex-item,我没有为它设置flex-shrink,导致内容超出屏幕时表格的高度被压缩了。

表格的左侧不用滚动,超出的部分被显示,右侧需要滚动,超出的内容就要轮动才能显示,表现为看不到而出现大片空白。

现在,设置“flex-shrink:0”样式即可。

只是,让人奇怪的是iOS下没这个问题,估计是不同的浏览器内核渲染的差异导致的。

是的,IDE、iOS 9 8、Android等不同环境上webview内核或多或少会有些差异,使用一些高级的css技术时可能会遇到点兼容性问题

回到顶部