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

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

–>

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

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

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

2 回复

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

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

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

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

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

回到顶部