美文网首页
react 实现滚动悬浮踩坑心路历程

react 实现滚动悬浮踩坑心路历程

作者: 无名程序猿 | 来源:发表于2019-04-26 15:53 被阅读0次

1、ie下滚动悬浮,开始的思路是第一步通过监听元素的滚动事件,第二步在滚动事件中添加setstate事件。

现象:此处在滚动的过程中,页面不停的重新渲染。导致ie11(win10系统下)出现卡顿,不流畅的情况。

错误代码

2、为了解决不重新渲染的情况,需要将要悬浮的元素在固定在视图外,在滚动的条件内添加class类名,改变top值显示。

正确代码

效果图:

相关文章

  • react 实现滚动悬浮踩坑心路历程

    1、ie下滚动悬浮,开始的思路是第一步通过监听元素的滚动事件,第二步在滚动事件中添加setstate事件。 现象:...

  • flutter 滚动隐藏悬浮按钮

    flutter 滚动隐藏悬浮按钮 实现思路,当开始滚动的时候,执行动画让中间的悬浮按钮向右移动。当滚动结束的时候复...

  • 我的前端笔记

    目录 react 小程序 vue typescript 经验(踩坑) react useMemo 和 useCal...

  • ReactNative:32-bit instead of 64

    [React Native] 踩坑记录: /SoLoader: couldn't find DSO to load...

  • 前端杂记

    ScrollView嵌套FlatList滚动处理 React Native 实现物流进度信息 react-nati...

  • 无限滚动字幕参考方案

    因为前段时间在做广告机,正好需要用到字幕滚动,期间也踩了一些坑,所以这边就讲一下安卓字幕滚动的几种实现方案。(这边...

  • 原生App植入React Native 踩坑记

    原生App植入React Native 踩坑记 为什么我踩坑了有一个需求要去可以在当前工程的feature/RN ...

  • React 踩坑

    React-Router 从到2.0到4.0 一不小心安装router4.0后项目一直报错 就可以了

  • react踩坑

    yarn run eject时 Uninstalling react-scripts and installing...

  • react-native-reanimated2 实现tabba

    最终效果 这里记录下所有实现过程以及踩过的坑: 创建项目(这里用的是expo,react-native一样的) 这...

网友评论

      本文标题:react 实现滚动悬浮踩坑心路历程

      本文链接:https://www.haomeiwen.com/subject/dhcqnqtx.html