代码：

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="UTF-8">

    <title>React中的事件</title>

</head>

<body>

    <script src="./react-0.13.2/react-0.13.2/build/react.js"></script>

    <script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>

    <script type="text/jsx">

        var HelloWorld = React.createClass({

            getInitialState: function () {

                return {

                    backgroundColor: '#FFFFFF'

                }

            },

            handleWheel: function (event) {

                var newColor = (parseInt(this.state.backgroundColor.substr(1), 16) + event.deltaY * 997).toString(16);

                newColor = '#' + newColor.substr(newColor.length - 6).toUpperCase();

                this.setState({

                    backgroundColor: newColor

                })

            },

            render: function () {

                console.log(this.state)

                return <div onWheel={this.handleWheel} style={this.state}>

                <p>Hello, World</p>

                </div>;

            },

        });

        React.render(<HelloWorld></HelloWorld>, document.body);

    </script>

</body>

</html>

　　1.

(parseInt(this.state.backgroundColor.substr(1), 16)    去掉#，将16 进制的颜色转化为10进制
2.
event.deltaY * 997
颜色进行变化
3.
 (parseInt(this.state.backgroundColor.substr(1), 16) + event.deltaY * 997).toString(16);
将10进制的颜色转化为16进制


　　效果：


												


											
React 滚动事件的更多相关文章
	

    
								
  1. js鼠标滑轮滚动事件绑定（兼容主流浏览器）
		
    /** Event handler for mouse wheel event. *鼠标滚动事件 */ var wheel = function(event) { var delta = 0; if  ...
    
		
    2. 
						
  2. react.js 从零开始（五）React 中事件的用法
		
    事件系统   虚拟事件对象 事件处理器将会传入虚拟事件对象的实例,一个对浏览器本地事件的跨浏览器封装.它有和浏览器本地事件相同的属性和方法,包括 stopPropagation() 和 prevent ...
    
		
    3. 
						
  3. 一次react滚动列表的实践---兼容ios安卓
		
    一.背景 近期项目改版,对原有的h5页面进行了重新设计,数据呈现变成了瀑布流.希望新版兼容ios和安卓两端的情况下,无限制的刷新加载数据.大致效果如下: 整个页面分4部分: 顶部导航 步数状态卡片 用 ...
    
		
    4. 
						
  4. 鼠标滚动事件兼容性 wheel、onwheel
		
    wheelEvent = "onwheel" in document.createElement("div") ? "wheel" : // ...
    
		
    5. 
						
  5. JavaScript----分层导航  滚动事件
		
    分层导航 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
    
		
    6. 
						
  6. js网页滚动条滚动事件实例分析
		
    本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件 ...
    
		
    7. 
						
  7. JS鼠标滚动事件
		
    -----------------------------//鼠标滚动事件以下是JS临听鼠标滚动事件 并且还考虑到了各浏览器的兼容----------------------------------- ...
    
		
    8. 
						
  8. Jquery-Mobile滚动事件
		
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> < ...
    
		
    9. 
						
  9. javascript滚动栏响应鼠标滑轮的实现上下滚动事件
		
    实现鼠标滚动滚轮事件: <script type="text/javascript"><pre name="code" class=" ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Vue通信的10种方式
			
    1.10种通信方式 10种:https://juejin.im/post/5bd18c72e51d455e3f6e4334 2.除此之外,还有children和ref. 需要注意 $children  ...
    
			
    2. 
						
  2. 使用Docker搭建Cloudera Hadoop 环境搭建
			
    单节点 单节点:https://hub.docker.com/r/cloudera/quickstart/ 相关命令 docker pull cloudera/quickstart:latest do ...
    
			
    3. 
						
  3. 尽量用类型化的常量替代预处理器的 #DEFINE 方法
			
    类型化常量 (TYPED CONSTANTS) #define ANIMATION_DURATION 0.3 这是一个预处理器指令,当编译器在代码中发现有 ANIMATION_DURATION 时,就 ...
    
			
    4. 
						
  4. kPagination纯js实现分页插件
			
    kPagination分页插件 纯js分页插件,压缩版本~4kb,样式可以自定义 demo 使用方法 <div id="pagination"></div> ...
    
			
    5. 
						
  5. PHP缓存技术OB系统函数（总结）
			
    PHP缓存技术OB系统函数(总结) 一.总结 一句话总结: ob相比于php普通的文件操作多了缓存机制,所以适合做php的页面静态缓存 1.为什么php使用ob做静态文件缓存? 解决header()报 ...
    
			
    6. 
						
  6. MySQL-初始化和自动更新TIMESTAMP和DATETIME
			
    https://dev.mysql.com/doc/refman/8.0/en/timestamp-initialization.html 例,添加自动更新的保存最后一次修改该条记录的时间戳的字段:  ...
    
			
    7. 
						
  7. Openstack API 类型 & REST 风格
			
    目录 目录 Openstack 提供了三种操作方式 Web界面 CIL 指令行 RESTful API REST 风格 RESTFul风格的API设计 基于HTTP协议的RESTful API Ope ...
    
			
    8. 
						
  8. android 关联某些后缀使用app打开
			
    <intent-filter> <action android:name="android.intent.action.VIEW" /> <categ ...
    
			
    9. 
						
  9. git 多个远程仓库
			
    有时候一个git项目需要使用多个远程库,如:测试环境+生产环境,国内加国外等 项目根目录下修改 .git/config 文件 vim .git/config 新增远程一个远程仓库   并为其命名 :如 ...
    
			
    10. 
						
  10. appium常见问题04_查看andriod内置浏览器webview版本
			
    方法一:手机上设置中查看 设置-->应用程序管理-->全部-->Android System WebView 方法二:adb指令查看(前提,已安装android sdk环境) 1,w ...
    
			
    11.