你如何在reactjs中获得鼠标滚轮事件？
我试过onWheel
render: function() {
return <div onWheel = {this.wheel} >
< /div>;
},
我试过onScroll
render: function() {
return <div onScroll = {this.wheel} >
< /div>;
},
但这些事件都没有被提起.看下面的小提琴:
我按照React.js中的帖子 更新样式onScroll上的指令来注册滚动事件的事件监听器.
我有一个React组件,它从React-Bootstrap库中呈现一个Table组件https://react-bootstrap.github.io/
我想我正确地注册了事件监听器,但我不确定为什么当我向下滚动表时,我的handleScroll()回调没有被调用.是因为事件监听器没有在实际表本身上注册吗？
感谢您花时间阅读我的问题.任何反馈都表示赞赏.
这是我如何注册事件监听器的片段.
handleScroll: function(event) {
console.log('handleScroll invoked');
},
componentDidMount: function() {
console.log('componentDidMount invoked');
window.addEventListener('scroll', this.handleScroll);
},
componentWillUnmount: function() {
console.log('componentWillUnmount invoked');
window.removeEventListener('scroll', this.handleScroll);
},
这是我的渲染功能的片段.
render: function() {
var tableRows = this.renderTableRow(this.props.sheet);
return (
<Table striped bordered condensed hover>
<TableHeaderContainer
tableTemplateName={this.props.tableTemplateName}
sheetName={this.props.sheet.name}/>
<tbody>
{tableRows}
</tbody>
</Table>
);
}
我有简单的反应组件,我将onScroll事件设置为该组件,但是当我滚动它没有触发时
import React, { Component, PropTypes } from 'react'
export default class MyComponent extends Component {
_handleScroll(e) {
console.log('scrolling')
}
render() {
const style = {
width: '100px',
height: '100px',
overflowY: 'hidden'
}
const innerDiv = {
height: '300px',
width: '100px',
background: '#efefef'
}
return (
<div style={style} onScroll={this._handleScroll}>
<div style={innerDiv}/>
</div>
)
}
}
我正在尝试将onscroll事件处理程序添加到特定的dom元素.看看这段代码:
class ScrollingApp extends React.Component {
...
_handleScroll(ev) {
console.log("Scrolling!");
}
componentDidMount() {
this.refs.list.addEventListener('scroll', this._handleScroll);
}
componentWillUnmount() {
this.refs.list.removeEventListener('scroll', this._handleScroll);
}
render() {
return (
<div ref="list">
{
this.props.items.map( (item) => {
return (<Item item={item} />);
})
}
</div>
);
}
}
代码非常简单,正如您所看到的,我想处理div#list scrolling.当我运行这个例子时,它不起作用.所以我尝试直接绑定this._handleScroll渲染方法,它也不起作用.
<div ref="list" onScroll={this._handleScroll.bind(this)> ... </div>
所以我打开了chrome检查器,直接添加onscroll事件:
document.getElementById('#list').addEventListener('scroll', ...);
它正在工作!我不知道为什么会这样.这是React的错误还是什么？还是我错过了什么？任何设备都将非常感激.
我正在使用bootstrap 4导航栏,并希望在ig 400px向下向下滚动后更改背景颜色.我正在查看反应文档并找到了一个onScroll但却找不到那么多信息.到目前为止我有
我不知道我是否正在使用正确的事件监听器或如何设置高度等.
我并没有真正设置内联样式
import React, { Component } from 'react';
class App extends Component {
constructor(props) {
super(props);
this.state = { scrollBackground: 'nav-bg' };
this.handleScroll = this.handleScroll.bind(this);
}
handleScroll(){
this.setState ({
scrollBackground: !this.state.scrollBackground
})
}
render() {
const scrollBg = this.scrollBackground ? 'nav-bg scrolling' : 'nav-bg';
return (
<div>
<Navbar inverse toggleable className={this.state.scrollBackground}
onScroll={this.handleScroll}>
...
</Navbar>
</div>
);
}
}
export default App;
如何在滚动React js中添加元素中的类,我想在滚动中添加类,如果在页面顶部则删除该类.
import React from "react"
import { Link } from "react-router"
import { prefixLink } from "gatsby-helpers"
import Helmet from "react-helmet"
import { config } from "config"
module.exports = React.createClass({
propTypes() {
return {
children: React.PropTypes.any,
}
},
render() {
window.addEventListener('scroll', (event) => {
});
return (
<div>
<header className="header">
<div className="top-bar">
<span><a href="tel:6788272782">678-827-2782 </a></span>
<span><a href="mailto:hellohello@knotel.com"> hellohello@knotel.com</a></span>
<button>Login</button>
</div>
</header>
{this.props.children}
</div>
)
},
})
我收到此错误：Cannot read property 'getBoundingClientRect' of null。我使用这个功能getBoundingClientRect，是因为在我的项目中我想要达到以下效果：当一个元素突出显示时，其余元素具有不同的样式。该消息显示了功能handleScroll。我使用的组件看起来像这样
class QuestionListItem extends Component {
constructor() {
super();
this.state = {
isActive: false,
};
this.handleScroll = this.handleScroll.bind(this);
}
componentDidMount = () => {
window.addEventListener('scroll', this.handleScroll);
this.handleScroll();
};
handleScroll = () => {
const { isActive } = this.state;
const { top } = this.wrapRef.getBoundingClientRect();
if (top > 60 && top < 400 && !isActive) {
this.setState({ isActive: true });
}
if ((top <= 60 || top >= 400) …请不要标记为重复。它与其他问题相似，但不同，因为我问的是哪里是将代码放在，而不是如何编写。
我有这个代码，并想检测哪个部分在视图中：
export default class Home extends React.Component {
render() {
return (
<React.Fragment>
<div className="col_first">
<Scrollspy id="menu_section"
items={['section_1', 'section_2', 'section_3', 'section_4', 'section_5']}
currentClassName="is-current" className="c_nav_menu" style={{marginTop: 100}}>
<li className="c_nav_menu_item"><a href="#section_1">1</a></li>
<li className="c_nav_menu_item"><a href="#section_2">2</a></li>
<li className="c_nav_menu_item"><a href="#section_3">3</a></li>
<li className="c_nav_menu_item"><a href="#section_4">4</a></li>
<li className="c_nav_menu_item"><a href="#section_5">5</a></li>
</Scrollspy>
<div>
<li className="lines_between_1"></li>
<li className="lines_between_2"></li>
<li className="lines_between_3"></li>
<li className="lines_between_4"></li>
</div>
</div>
<section className="row bg_double">
<div className="col-lg-1">
</div>
<div className="col-lg-11 s_anim">
<div className="full_screen" id="section_1">
<div className="row full_size">
<div className="col-lg-12 center_in_s1">
<h1 className="text_s1 gradient_text">ZdajTo</h1>
<p>korepetycje on-line</p>
</div> …我想让我的导航栏一开始是透明的，但是当用户滚动时，导航栏会改变颜色/背景颜色。我正在使用引导导航栏并做出反应。
jsx 代码：
import React, { Component } from 'react';
import '../css/nav.scss';
import { Link, NavLink } from 'react-router-dom';
import 'react-bootstrap';
class Navbar extends Component {
state = {};
render() {
return (
<nav className="navbar sticky-top navbar-expand-lg ">
<NavLink
to="/"
class="navbar-brand"
activeClassName="navbar-brand--active"
>
Web_Env
</NavLink>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">
Create post
</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item"> …我的onScroll渲染函数中有一个事件。当站点滚动时，它应该触发输出一些数据的 listenScrollEvent 函数。由于某种原因，它没有被触发。我已经在构造函数中绑定了函数，但显然它没有帮助。
工作示例
import React, {Component} from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
export class Home extends Component {
constructor(props) {
super();
this.listenScrollEvent = this.listenScrollEvent.bind(this);
}
listenScrollEvent() {
console.log('Scroll event detected!');
}
render() {
return (
<div className="App" onScroll={this.listenScrollEvent}>
What is Lorem Ipsum?aa
Lorem Ipsum is simply dummy text of the printing and taypesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer …