评论

在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  
点赞 31
收藏
评论

17 个评论

  • 黄黎
    黄黎
    2020-06-04

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

    2020-06-04
    赞同 5
    回复
  • 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
    赞同 3
    回复 2
    • Helios.
      Helios.
      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被获取高度,从而达到样式正常。
      02-26
      回复
    • 摩羯大灰狼
      摩羯大灰狼
      05-27
      如果这么做还是不行的话,可以试下 页面的 json 配置 添加 disableScroll: true
      05-27
      回复
  • Re 0
    Re 0
    2021-02-18

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

    2021-02-18
    赞同 2
    回复
  • 墨染幽阁
    墨染幽阁
    03-29

    感谢

    03-29
    赞同
    回复
  • 小杨子
    小杨子
    2021-10-28

    牛批牛批

    2021-10-28
    赞同
    回复
  • 呼延
    呼延
    2021-06-29

    谢谢大佬

    2021-06-29
    赞同
    回复
  • Biu
    Biu
    2021-04-06

    一开始不行的时候我都想监听scroll来搞了,然后翻着翻着突然翻到兄弟这文章,只能说,牛逼!

    2021-04-06
    赞同
    回复
  • young
    young
    2021-03-19

    thanks

    2021-03-19
    赞同
    回复
  • 马骉
    马骉
    2021-03-13

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

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

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

    2021-03-13
    赞同
    回复 2
    • 独坐空山后
      独坐空山后
      2021-12-01
      你好,我和你一样也是横向滚动,但是我也这样写不生效
      2021-12-01
      回复
    • 独坐空山后
      独坐空山后
      2021-12-01
      这是css
      2021-12-01
      回复
  • 崮生
    崮生
    2021-01-08

    感谢,这小程序的bug让人难受

    2021-01-08
    赞同
    回复

正在加载...

登录 后发表内容