评论

在scroll-view中使用sticky

使用sticky定位踩的一个坑

.container{
  width: 600rpx;
  height: 800rpx;
}
.a {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  width: 100%;
  height: 200rpx;
  background-color: black;
}
.b {
  width: 100%;
  height: 3000rpx;
  background-color: red;
} 


<scroll-view class="container">
  <view>
    <view class="a"></view>  
    <view class="b"></view>
  </view>
</scroll-view>


sticky的元素在到达父元素的底部时会失效

scroll-view的高度为800rpx,但是scrollHeight为3200rpx,所以在scroll-view中嵌套一个view就能顺利定位

最后一次编辑于  2019-12-18  
点赞 41
收藏
评论

27 个评论

  • LauHing[666]
    LauHing[666]
    2021-03-22

    我也遇到同样问题了。要注意两点的

    1.父元素不能是over:hidden

    2.scroll-view里要加个view再嵌套sticky进去

    建议参考这个官方示例,

    https://developers.weixin.qq.com/s/P73kJ7mi7UcA


    2021-03-22
    赞同 7
    回复 2
    • Alex
      Alex
      2022-02-26
      协助补充说明一下楼主关于2. scroll-view里要加个view再嵌套sticky进去。


      准确来说,如果希望sticky元素对于整个scroll-view容器起作用,在scroll-view中应有且仅有一个view作为其所有子元素的根元素。


      解释:因为平台scroll-view的特性问题,sticky元素在离开了原定的scroll-view的height距离后,就不能识别scroll-view的距顶高度了,所以用一个无样式的view撑开整个scroll-view中元素的高度,让这个view以能够替代scroll-view被获取高度,从而达到样式正常。
      2022-02-26
      5
      回复
    • 摩羯大灰狼
      摩羯大灰狼
      2022-05-27
      如果这么做还是不行的话,可以试下 页面的 json 配置 添加 disableScroll: true
      2022-05-27
      1
      回复
  • 黄黎
    黄黎
    2020-06-04

    专门登录来给你点赞,解决了我的问题

    2020-06-04
    赞同 6
    回复
  • 马骉
    马骉
    2021-03-13

    感谢楼主,成功解决。简言之,设置sticky元素上层的容器,必须设置长和宽为最大内容长宽。

    按楼主的代码,直接做了一个view作为上层容器是不行的,看到实际渲染时它的宽高自动设为了上层scroll-view的宽(默认的750rpx)高,仍会出现楼主的问题(我是横向滚动)。

    在将上层view设置了固定的宽高为内容最大宽高(大于上层scroll-view的宽高)后,sticky内容效果正常。

    2021-03-13
    赞同 2
    回复 3
    • 独坐空山后
      独坐空山后
      2021-12-01
      你好,我和你一样也是横向滚动,但是我也这样写不生效
      2021-12-01
      回复
    • 独坐空山后
      独坐空山后
      2021-12-01
      这是css
      2021-12-01
      回复
    • P
      P
      2022-09-27
      赞.
      2022-09-27
      回复
  • Re 0
    Re 0
    2021-02-18

    感谢分享, 这bug直接让血压拉满

    2021-02-18
    赞同 2
    回复
  • Jaimor
    Jaimor
    2023-01-17

    你是真的凶!!!微信团队都没想到的方法,你一个view就搞定了。小程序的scroll-view的浮动sticky定位真的难啊。感谢感谢。

    2023-01-17
    赞同 1
    回复
  • 贾鹏飞
    贾鹏飞
    07-05

    特意登录答谢!!!!

    07-05
    赞同
    回复
  • Gray同学很自律丶
    Gray同学很自律丶
    04-10

    特意登录上来感谢大佬

    04-10
    赞同
    回复
  • 王小臣馁馁
    王小臣馁馁
    01-04

    专门登录来感谢 点赞 收藏

    01-04
    赞同
    回复
  • Sparks
    Sparks
    01-04

    特地登录来赞一下,牛逼

    01-04
    赞同
    回复
  • 1112~
    1112~
    2023-10-27

    nb!感谢

    2023-10-27
    赞同
    回复

正在加载...

登录 后发表内容