收藏
回答

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

问题模块
API和组件


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

-->

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

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

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

最后一次编辑于  2017-03-09  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏关注问题回答

2 个回答

  • Tïedào
    Tïedào
    2017-03-09

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

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

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

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

    2017-03-09
    赞同
    回复
  • tian
    tian
    2017-03-09

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

    2017-03-09
    赞同
    回复