评论

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

9 个评论

  • 狡猾的海绵
    狡猾的海绵
    2020-06-04

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

    2020-06-04
    赞同 1
    回复
  • 崮生
    崮生
    01-08

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

    01-08
    赞同
    回复
  • 丶
    2020-12-02

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

    <view class="a_0>
      <view class="a"></view>  
    </view>
    <view class="b"></view> 
    
    2020-12-02
    赞同
    回复 1
    • 丶
      2020-12-02
      请问scroll-view怎样使用position: sticky;呢
      2020-12-02
      回复
  • 筑梦
    筑梦
    2020-09-18

    解决问题了,谢谢分享!

    2020-09-18
    赞同
    回复
  • [好的]长忆秋🌻
    [好的]长忆秋🌻
    2020-07-25

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

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

    2020-07-25
    赞同
    回复 2
    • 天前
      天前
      2020-07-27
      不太明白你的意思,如果要返回顶部,scroll-into-view的id写包住子元素的view的id就应该行了
      2020-07-27
      回复
    • [好的]长忆秋🌻
      [好的]长忆秋🌻
      2020-07-27回复天前
      解决了.
      2020-07-27
      回复
  • www
    www
    2020-06-11

    奥里给,谢谢大🐻弟

    2020-06-11
    赞同
    回复
  • 怂怂张
    怂怂张
    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
    赞同
    回复
登录 后发表内容