精华内容
下载资源
问答
  • div className={'main-content'} key={'main-content'} style={{height: scrollerHeight, overflowY: 'scroll'}} ref={c => { this.scrollRef = c; }} onScrollCapture={() => this.onScrollHandle()} &...
    <div className={'main-content'} key={'main-content'}
         style={{height: scrollerHeight, overflowY: 'scroll'}}
         ref={c => {
             this.scrollRef = c;
         }}
         onScrollCapture={() => this.onScrollHandle()}
    >
        <Table
            onRow={record => {
                return {
                    onClick: (e) => {},
                    onDoubleClick: (e) => {},
                    onContextMenu: (e) => {},
                };
            }}
            rowSelection={rowSelection}
            pagination={false}
            columns={columns}
            dataSource={fileList}/>
    </div>
    /*当前data数据显示完且滚动到底部时更新数据*/
    onScrollHandle = () => {
        const scrollTop = this.scrollRef.scrollTop;
        const clientHeight = this.scrollRef.clientHeight;
        const scrollHeight = this.scrollRef.scrollHeight;
        const isBottom = scrollTop + clientHeight === scrollHeight;
        let {totalElements,fileList, page} = this.state;
        if (isBottom && fileList.length < totalElements) {
            this.getFileList({page: page + 1, size: 100, parentId: '0'});
        }
    };
    展开全文
  • react 监听页面滚动

    千次阅读 2019-01-12 14:42:58
    import React from 'react'; export default class Myscroll extends React.Component { constructor(props) { super(props); this.state = { codeType:true, } }...
    
    import  React from 'react';
     
    export default class Myscroll extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                codeType:true, 
            }
        }
        componentDidMount() {
            // 挂载滚动监听
            window.addEventListener('scroll', this.bindScroll)
        }
        componentWillUnmount() {
            // 移除滚动监听
            window.removeEventListener('scroll', this.bindScroll);
        }
        render() {
            return (
                <div></div>
            )
        }
        bindScroll(event) {
            // 滚动的高度
            const scrollTop = (event.srcElement ? event.srcElement.documentElement.scrollTop : false) || window.pageYOffset || (event.srcElement ? event.srcElement.body.scrollTop : 0);
            // 视窗高度
            const clientHeight = (event.srcElement && event.srcElement.documentElement.clientHeight) || document.body.clientHeight;
            // 页面高度
            const scrollHeight = (event.srcElement && event.srcElement.documentElement.scrollHeight) || document.body.scrollHeight;
            // 距离页面底部的高度
            const height = scrollHeight - scrollTop - clientHeight;
            // 判断距离页面底部的高度
            if (height <= (this.props.num || 0)) {
                // 判断执行回调条件
                if (this.state.codeType) {
                    // 执行回调
                    this.props.scrollCallback();
                    // 关闭判断执行开关
                    this.setState(
                        {
                            codeType: false,
                        }
                    );
                }
            } else {
                // 打开判断执行开关
                this.setState({
                    codeType: true
                });
            }
        }
    }
    
    
    
    展开全文
  • 原理 拿到dom元素 添加onscroll事件 更具下面参数判断 垂直到底部 scrollHeight - scrollTop ===clientHeight 水平到底部 scrollWidth - scrollLeft === clientWidth

    原理

    1. 拿到dom元素
    2. 添加onscroll事件
    3. 更具下面参数判断

    垂直到底部

    scrollHeight - scrollTop ===clientHeight
    

    水平到底部

    scrollWidth - scrollLeft === clientWidth
    
    展开全文
  • react监听页面的滚动

    千次阅读 2020-05-15 18:13:46
    } render() { return ( //设置高度让它出现滚动条 好多内容 ); } } 这样能获取到数据 2 "00000" 15 "00000" 39 "00000" 53 "00000" 67 "00000" 89 "00000" 95 "00000" 99 "00000" 100 "00000" 101 "00000" 104 ...
    componentDidMount = () => {
        document
            .getElementsByClassName('leftPanel')[0]
            .addEventListener('scroll', this.bindHandleScroll);
    };
    
    bindHandleScroll = (event: any) => {
        console.log(document.getElementsByClassName('leftPanel')[0].scrollTop, '00000');
    };
    
    componentWillUnmount() {
        window.removeEventListener('scroll', this.bindHandleScroll);
    }
    render() {
        return (
            <div className="leftPanel"> //设置高度让它出现滚动条
               好多内容
            </div>
        );
      }
    }

    这样能获取到数据

    2 "00000"
    15 "00000"
    39 "00000"
    53 "00000"
    67 "00000"
    89 "00000"
    95 "00000"
    99 "00000"
    100 "00000"
    101 "00000"
    104 "00000"
    107 "00000"
    108 "00000"
    109 "00000"
    110 "00000"
    111 "00000"

    client:元素可视宽高

    元素.clientWidth : width+padding

    元素.clientHeight :  height+padding

    屏幕的可视宽高:

    document.documentElement.clientWidth/Height

     

    offset:元素的占位宽高

    元素.offsetWidth : width+padding+border

    元素.offsetHeight : height+padding+border

    到其他元素的位置:

    元素.offsetTop : 当前元素的顶部,到定位父元素的位置,没有定位父元素,到body的位置

    元素.offsetLeft : 当前元素的左边,到定位父元素的位置,没有定位父元素,到body的位置

     

    scroll:屏幕的滚动距离:

    document.documentElement.scrollTop || document.body.scrollTop

    展开全文
  • 基于react封装监听页面滚动组件

    千次阅读 2018-08-17 23:57:06
    前段时间做了一个react的pc项目,因为业务需要做监听页面滚动操作,在网上找了一些方法都不太理想,干脆直接自己动手丰衣足食了,代码如下: /** * 文档作者: Beamon__ * 描述信息:公共组件-监听页面滚动触发回...
  • //首先在componentDidMount,进行scroll事件的注册,绑定一个函数,让这个函数进行监听处理 componentDidMount() { window.addEventListener('scroll', this.... // 滚动的高度(兼容多种浏览器) const scro...
  • react 滚动条组件Let’s re-implement the progress bar on page scroll effect that you may have seen on many popular blogs including this one. 让我们重新实现页面滚动效果上的进度条,您可能已经在包括该...
  • 监听滚动条到底部事件响应

    千次阅读 2018-10-17 19:24:47
    直接拿一个页面过来说问题,好桑心获取节点困了好久,然而只想简简单单用这篇文章来记录滚动条滚到底部触发事件 @inject('blogAttentionStore') @observer export default class ShareToMe extends React....
  • react监听scroll

    千次阅读 2018-12-18 14:06:09
    1. dom.addEventListener('scroll', this.orderScroll.bind(this)); orderScroll() { / ****** / } 1.document.body.clientWidth //浏览器窗口的宽度... 2.div.clientWidth //div的宽度 3.div.offsetLef...
  • 介绍了js固定DIV高度,超出部分自动添加滚动条的简单方法,有需要的朋友可以参考一下
  • import React, { useState, useRef } from 'react' import { Tabs, List, Input, Image } from 'antd' import Api from '../../../../../api' import moment from 'moment' import { deepClone } from '../../../../...
  • 改组件是被渲染的组件,通过改变路由,可页面自动滚动至改组件显示 import React, { useEffect, useRef } from 'react' import { withRouter } from 'react-router-dom' const App = props =>{ const oneself =...
  • OverlayScrollbars插件监听滚动条的用法

    千次阅读 2020-03-23 16:36:28
    //监听滚动条 // $(".current-scroll").overlayScrollbars({ // callbacks:{ // onScroll:function(){ // console.log('正在滚动中') // } // } // }) }) //设置滚动条的位置 let instances = $(".current-scroll")...
  • react监听scroll

    2020-05-20 10:59:44
    2.div.clientWidth //div的宽度 3.div.offsetLeft //div距离左侧的宽度 4.div.scrollLeft // 滚动条滚动的距离 设置滚动的距离: div.scrollBy(200, 0) //横向 div.scrollBy(0, 200) //纵向 滚动的位置: div....
  • // 监听滚动条 获取指定元素到可视区域顶部的距离 $(window).scroll(function(){ var box=document.getElementById('scroll'); console.log(box.getBoundingClientRect().top) })
  • 最近在做毕设,其中有一个地方需要做一个当滚动条到一定位置时图片能自动飞入的特效,通过参考网上的资料做了一个简单的飞入特效。 css #box{ position: relative; width: 1000px; height: 490px; margin:...
  • Html <div className="content-layer"> <div className="module0 module-base"> <CarRegister pageQuery={pageQuery} jumpModule={this.handleStep} /&...
  • //id为滚动条DIV元素 scroll为滚动条监测方法 $(’#openAllRecords’).scroll(function() { console.log(“AllscrollTop”+this.scrollTop); console.log(“AllHeight”+this.scrollHeight); console.log(...
  • ReactJS 监听页面滚动事件

    万次阅读 2017-09-27 07:55:59
    需要使用监听页面的滚动事件,折腾了挺久终于实现了,写出来跟大家分享一下。希望有更好的做法也能留言给我,谢谢��export class Example extends Component{ scrollHandler = this.handleScroll.bind(this); ...
  • 最近在使用 React 技术栈重构一个单页应用,其中有个页面是实现城市选择功能,主要是根据城市的首字母来快速跳转到相应位置,比较类似原生 APP 中的电话联系人查找功能,页面如图 主要问题 在上下滑动右侧 fixed ...
  • import React, { useRef, useEffect, memo } from 'react' import PropTypes from 'prop-types' import { Spin } from 'antd' import { isEmpty } from 'lodash' import * as api from '../../api' import ...
  • react获取滚动的高度

    千次阅读 2020-01-03 03:18:37
    例1:handleScroll(e){ let clientHeight = this.refs.bodyBox.clientHeight; //可视区域高度 let scrollTop = this.refs.bodyBox.... //滚动条滚动高度 let scrollHeight = this.refs.bodyBox.scrollHeigh...
  • 产品他们有个需求就是,在页面上往下滚动的时候隐藏头部的导航栏,鼠标向上就显示该导航栏,这里有两个点要注意,第一是滚动的是哪个容器,react怎么监听滚动事件,其实也不难,需要慢慢调试。上代码: ...
  • react.js 自定义滚动事件

    千次阅读 2018-12-06 10:22:52
    onscroll=()=&gt;{ let ctx = this; let clientHeight = ctx.refs.bodyBox.clientHeight; //可视区域高度 let scrollTop = ctx.refs.bodyBox.scrollTop; //滚动条滚动高度 let scrollHeight =...
  • React 滚动事件

    2017-09-28 19:02:00
    代码: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8">...React中的事件</title> </head> <body> <script src="./re...
  • 自己上代码比较容易:这边是es6的写法,可以封装成一个组件,这样每个界面都可以用了/** ... */import React from 'react';//点击返回顶部class BackTop extends React.Component { // 渲染之后 componentDidMount() {

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,326
精华内容 530
关键字:

react监听div滚动条变化