评论

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

  • 丶
    2020-12-02

    您好,我在 .a外面给他包裹一层,然后再给a_0定位就不生效了,请问为什么呢?

    <view class="a_0>
      <view class="a"></view>  
    </view>
    <view class="b"></view> 
    
    2020-12-02
    赞同
    回复 3
    • 丶
      2020-12-02
      请问scroll-view怎样使用position: sticky;呢
      2020-12-02
      回复
    • 周飞
      周飞
      2021-03-15
      这样试试
      2021-03-15
      回复
    • Who am I?
      Who am I?
      2021-08-16
      目前测试,上面的这种写法三级View好像是正常的, 四级就不生效了
      2021-08-16
      回复
  • 筑梦
    筑梦
    2020-09-18

    解决问题了,谢谢分享!

    2020-09-18
    赞同
    回复
  • 🍩
    🍩
    2020-07-25

    有一个问题,不知道你解决没 .

    scroll-view 里面加一个view 包住 子项, 是可以使用sticky 但是 ,会导致 :scroll-into-view 方法 失效(选择后面的不会失效,但是返回顶部的会失效)

    2020-07-25
    赞同
    回复 4
    • 天前
      天前
      2020-07-27
      不太明白你的意思,如果要返回顶部,scroll-into-view的id写包住子元素的view的id就应该行了
      2020-07-27
      回复
    • 🍩
      🍩
      2020-07-27回复天前
      解决了.
      2020-07-27
      回复
    • 李程彬
      李程彬
      2021-06-21回复🍩
      请问你在scroll-into-view的时候  sticky元素会先跟着滚动,然后闪到sticky位置吗?您是怎么解决的?
      2021-06-21
      回复
    • 威廉蔡
      威廉蔡
      2023-09-11回复李程彬
      有遇到同样问题
      2023-09-11
      回复
  • ( ̄_ ̄ )
    ( ̄_ ̄ )
    2020-06-11

    奥里给,谢谢大🐻弟

    2020-06-11
    赞同
    回复
  • I BELIEVE。
    I BELIEVE。
    2020-05-24

    但是 IOS里,scroll-view滑动的时候,sticky元素会抖动怎么办呢

    2020-05-24
    赞同
    回复 1
    • wenh
      wenh
      2020-07-03
      跟我遇到同样的问题,请问有解决方案吗?谢谢~
      2020-07-03
      回复
  • 王木又
    王木又
    2020-03-25

    谢谢分享, 解决了

    2020-03-25
    赞同
    回复
  • 程先生
    程先生
    2020-01-04

    谢谢分享!解决我大问题了

    2020-01-04
    赞同
    回复

正在加载...

登录 后发表内容