react 获取滚动条距离顶部的数值

刺骨的言语ヽ痛彻心扉 2023-02-18 08:20 4阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>React 实例</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    </head>
    <body>
    
    <div id="example"></div>
    <script type="text/babel">
    class Toggle extends React.Component { 
      scrollHandler = this.handleScroll.bind(this);
      constructor(props) { 
        super(props);
      }
      componentDidMount() { 
        window.addEventListener('scroll', this.scrollHandler);
      }
      _handleScroll(scrollTop) { 
        console.log(scrollTop)
        //滚动条距离页面的高度
      }
      handleScroll(event) { 
        let scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
        this._handleScroll(scrollTop);
      }
    
      render() { 
        return (
          <p>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/>11<br/></p>
        );
      }
    }
    
    ReactDOM.render(
      <Toggle />,
      document.getElementById('example')
    );
    </script>
    
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，4人围观）

还没有评论，来说两句吧...

相关阅读

相关简易实现上拉加载操作（vue滚动条事件 - 获取滚动条距离底部距离）

通过获取到滚动条距离底部的距离，可以实现上拉加载操作有滚动条，div一定要设固定高度，然后overflow: auto出现滚动条 <div @scroll.pa

落日映苍穹つ/ 2023年02月25日 08:39/ 0 赞/ 3 阅读

相关 react 获取滚动条距离顶部的数值

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>React

刺骨的言语ヽ痛彻心扉/ 2023年02月18日 08:20/ 0 赞/ 5 阅读

相关 UNI-APP_uni-app获取滚动条距离页面顶部位置，uni-app设置距离顶部位置

获取滚动轴距离页面顶部距离： onPageScroll生命周期函数 onPageScroll(res){ console.log(res.scroll

阳光穿透心脏的1/2处/ 2022年12月28日 08:10/ 0 赞/ 334 阅读

相关 Vue 获取当前距离屏幕顶部的距离

[ 获取当前距离屏幕顶部的距离][Link 1] <template> <div ref="obtain"></div> <templa

àì夳堔傛蜴生んèń/ 2022年11月28日 13:24/ 0 赞/ 784 阅读

相关 js获取滚动条距离浏览器顶部,底部的高度

做web开发经常会碰到需要获取[浏览器][Link 1]的滚动条与顶部和底部的距离，然后做相应的处理动作。下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一

素颜马尾好姑娘i/ 2022年07月16日 02:12/ 0 赞/ 324 阅读

相关 scrollTop, scrollLeft 滚动条距离

滚动条滚动距离 \`document.documentElement.scrollTop // ie, ff document.body.scro

Myth丶恋晨/ 2022年06月18日 11:29/ 0 赞/ 199 阅读

相关 js获取可视化区域的宽和高以及滑动条距离顶部的距离

1.注意由于浏览器的多样性，所以我们在获取页面可视化区域的宽和高时，要在各个浏览器之间实现兼容。 2.与获取可视化区域宽、高一样，在我们获取页面滑动条距离顶部的距离的时候也会

亦凉/ 2022年06月15日 23:48/ 0 赞/ 195 阅读

相关获取当前位置到窗口顶部的距离

var offset=$(obj).offset();/获取某个位置到窗口顶部的距离，obj为当前dom 千万不能用obj.offsetTop,obj.off

ゝ一纸荒年。/ 2022年05月30日 08:51/ 0 赞/ 247 阅读

相关快速集成App中顶部标题滚动条

前言目前越来越多的App都需要顶部标题切换界面效果，并且带有非常炫酷的效果，利用点时间给广大的攻城狮们提供了这样一个框架，集成了当前比较主流的几种效果，网易新闻（字体缩

妖狐艹你老母/ 2022年03月21日 11:51/ 0 赞/ 179 阅读

相关获取滚动条scrollTop距离总是为0

js监听滚动条事件的时候，能够监听成功，奈何获取scrollTop 的时候总是为0，自己在控制台断点调试后发现还是一直未0，能获取到，就是这个距离是为0，检查语句和HTML还是

朱雀/ 2021年12月05日 02:07/ 0 赞/ 408 阅读