公告列表
公告列表
收藏
回答

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
      赞
      回复
请 登录 后发表内容
相关问题
相关文档
问题标签
代码scroll-view开发者工具基础库滚动条