Taro组件库使用＜ScrollView＞组件在ScrollView中添加粘性定位

最新推荐文章于 2024-09-21 20:57:48 发布

Youyzq

最新推荐文章于 2024-09-21 20:57:48 发布

阅读量1.2k

点赞数 1

不许偷代码哦，一键三连以后我的代码就是你的代码！！！

本文链接：https://blog.csdn.net/Youyzq/article/details/121613556

版权

小程序同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

react

20 篇文章 0 订阅

订阅专栏

taro

17 篇文章 1 订阅

订阅专栏

本文介绍了如何在React.js和Taro的ScrollView组件中实现粘性定位。由于ScrollView本身不支持粘性定位，作者通过监听onScroll事件，动态计算并设置元素样式来模拟此效果。当滚动超过特定阈值时，将元素固定在屏幕顶部，否则根据滚动距离调整其位置。关键代码包括获取滚动高度并据此更新定位元素的top属性。

摘要由CSDN通过智能技术生成

语言环境:react.js+taro
场景: 我想在<ScrollView> 组件中使用粘性定位
在ScrollView中是不支持粘性定位的所以我们要使用一些华丽的操作来实现这个功能

上代码

onScroll 这个事件，是你滚动时就会触发返回值(event.detail = { scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY})

	
   <ScrollView scrollY  onScroll={this.onscroll} >
   ref 获取dom元素
   <View className="box"  ref={e => (this.navigatorone = e)} >定位盒子</View>
   <ScrollView/>

css

.box{
  position: fixed;
  top: 50%;
  z-index: 99;
  height: 100px;
  width: 100px;
 }

逻辑
当用户开始滚动的时候，获取当前卷出去的高度，动态的赋值给需要固定的元素，这样就可以实现粘性定位了

 navigatorone = ''	//获取dom元素
 onscroll= e => {
 //1.判断当scrollTop到什么时候开始固定高度
    if (e.detail.scrollTop > 617) {
      this.navigatorone.style.top = 10 + 'px'
    } else {
    // 2. 如果不满足固定高度，就随着scrollTop进行变化
      this.navigatorone.style.top = 617 - e.detail.scrollTop + 'px'
    }
  }