收藏
回答

scroll-view内部的第一个盒子添加margin-top属性,出现滚动条?

案例代码https://developers.weixin.qq.com/s/ps4RIvmO7Sbe,在小程序开发者工具中即可复现,基础库2.4.4,版本为最新版本

描述:在scroll-view内部的第一个盒子添加margin-top时,scroll-view就出现滚动条,超出的部分就是margin-top的值,这个滚动条在自定义navbar页面影响效果,求官方验证?

回答关注问题邀请回答
收藏

5 个回答

  • hexford~🐶
    hexford~🐶
    2019-09-25

    margin-top 垂直方向塌陷导致的,建议开发者自行规避。

    解决方案:在第一个元素前增加空元素。

    <view style="content: ''; overflow: hidden;"></view>


    2019-09-25
    有用 6
    回复 4
    • Yhong
      Yhong
      2019-09-25
      好的!
      2019-09-25
      回复
    • Lgowen
      Lgowen
      2021-10-20
      该情况在开发者工具中生效,但是真机似乎不生效啊
      2021-10-20
      回复
    • 放生
      放生
      2021-12-06回复Lgowen
      一样的,该方案真机不生效
      2021-12-06
      回复
    • 放生
      放生
      2021-12-06
      真机不生效
      2021-12-06
      回复
  • 微信小店技术专员-binnie
    微信小店技术专员-binnie
    2019-09-22

    感谢反馈,建议先在第一个元素添加一个占位box来规避

    2019-09-22
    有用 1
    回复 1
    • Yhong
      Yhong
      2019-09-23
      恩恩,好的
      2019-09-23
      回复
  • skyADMIN
    skyADMIN
    2022-05-06

    虽然加个空元素可以解决,但是太不优雅了,提供个别的方法:

    通过把page变成BFC来规避page子元素的margin垂直塌陷,变成BFC的方法有很多,可以选对自己业务完全无影响的方式。

    比如给page加个 overflow: auto;

    更多细节参考:

    https://juejin.cn/post/6976272394247897101

    2022-05-06
    有用 1
    回复
  • 心想事成
    心想事成
    2019-11-28
    小程序
    2019-11-28
    有用
    回复
  • 是小白啊
    是小白啊
    2019-09-19

    这个滚动条在自定义navbar页面影响效果具体是影响了哪里呢?

    2019-09-19
    有用
    回复 1
    • Yhong
      Yhong
      2019-09-20
      自定义的navbar在获取页面高度时会加上nabbar的高度,navbar下面的scroll-view有了这个margin-top的高度会让scroll-view里面的内容滑到navbar的下面,navbar就遮挡了scroll-view的内容,
      2019-09-20
      回复
登录 后发表内容
问题标签