scroll-view超出屏幕的内容显示为空白的问题

发布于 8 年前作者 dugang19094 次浏览最后编辑 8 年前来自 ask

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

WXOPEN Club 内容图片

–>

WXOPEN Club 内容图片

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

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

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

2 回复
ping87
ping871 楼6 年前

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

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

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

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

weijin
weijin2 楼6 年前

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