评论

在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 个评论

  • Arima
    Arima
    2023-10-25

    专门登录来感谢

    2023-10-25
    赞同
    回复
  • 593
    593
    2023-09-06

    太感谢了,这个bug离谱,找了好久

    2023-09-06
    赞同
    回复
  • By_Ha
    By_Ha
    2023-08-13

    2023-08-13
    赞同
    回复
  • 奋斗者丶森
    奋斗者丶森
    2023-03-12

    感谢楼主分享,哈哈哈,看来很多人都遇到了这个问题,我困扰了我一天的问题得到了解决

    2023-03-12
    赞同
    回复
  • 墨染幽阁
    墨染幽阁
    2022-03-29

    感谢

    2022-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-01-08

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

    2021-01-08
    赞同
    回复

正在加载...

登录 后发表内容