react单页应用不想出现竖直滚动条的解决方案

原创 2018年04月17日 16:24:30

针对改变浏览器宽度,浏览器底部出现滚动条时的情况,解决方案是设置事件监听,根据浏览器的可视区域高度实时更新页面的高度。

步骤1:在state中初始化页面高度为window.document.body.clientHeight(注:这里的clientHeight是去除页面底部滚动条高度的浏览器可视区域高度,应与window.innerHeight区分开)

state = {height:  window.document.body.clientHeight} 

步骤2:写一个方法用来更新height

reloadHeight = () => {
    this.setState({height: window.document.body.clientHeight})
  };

步骤3:在componentDidMount事件中添加一个设置高度的事件监听

componentDidMount() {
    window.addEventListener('resize', this.reloadHeight);
}

步骤4:在组件即将销毁时移除这个监听事件

componentWillUnmount() {
    window.removeEventListener('resize', this.reloadHeight)
  }
步骤5:在需要设置高度的标签上引用this.state.height就可以了

小花 - React事件阻止浏览器默认行为/冒泡

买生活用品就去www.tianmaovip.cn比超市便宜!!版权声明:http://blog.csdn.net/mx18519142864/article/details/79297394React...
  • mx18519142864
  • mx18519142864
  • 2018-02-09 13:13:32
  • 131

React学习之扩展阻止数据的更新的方法

1、使用PureRenderMixin浅比较PureRenderMixin的出现早于React.PureComponent,该插件属于历史保留,现在就使用React.PureComponent吧,这里...
  • qq_22889599
  • qq_22889599
  • 2018-03-13 17:16:35
  • 20

React + iscroll5 实现完美 下拉刷新,上拉加载

经过几天的反复折腾,总算做出一个体验还不错的列表页了,主要支持了下拉刷新,上拉加载两个功能。 http://www.aichengxu.com/other/11094788.htm 一开始...
  • sinat_17775997
  • sinat_17775997
  • 2017-03-20 16:57:28
  • 3994

React 构建单页应用方法与实例

首先在学习这门框架前,你需要对以下知识有所了解: 原生JS基础 CSS基础 npm包管理基础 webpack构建项目基础 ES6规范 以上五个知识点也是目前...
  • qq_40963664
  • qq_40963664
  • 2018-01-24 00:14:44
  • 85

基于react技术栈的单页应用(SPA)搭建_快速入门实践

概述本篇文章使用create-react-app作为脚手架,结合react技术栈(react + redux + react-router),构建一个简单的单页面应用demo。文章会一步步地讲解如何构...
  • forAlienZHOU
  • forAlienZHOU
  • 2017-08-19 10:52:14
  • 808

窥探react事件

写在前面本文源于本人在学习react过程中遇到的一个问题;本文内容为本人的一些的理解,如有不对的地方,还请大家指出来。本文是讲react的事件,不是介绍其api,而是猜想一下react合成事件的实现方...
  • zp1996323
  • zp1996323
  • 2017-01-08 20:04:37
  • 341

如何在手机上禁止浏览器的网页滚动

cordova项目在iOS平台上面测试的时候,会出现页面的滚动,露出iphone手机灰色的背景? 解决方法: head标签添加视口:     当页面高度超过设备可见高度时,阻止掉touchm...
  • ABC__D
  • ABC__D
  • 2016-05-05 15:13:22
  • 3001

基于react-router的单页应用

序 现在用react写单页应用基本上都是用react-router做前端路由了吧!最近在使用react-router的过程中遇到了不少问题,在这里总结一下。 浏览器url  react-rout...
  • three_bird
  • three_bird
  • 2016-05-28 15:36:24
  • 2314

React构建单页应用方法与实例

React作为目前最流行的前端框架之一,其受欢迎程度不容小觑,从这门框架上我们可以学到许多其他前端框架所缺失的东西,也是其创新性所在的地方,比如虚拟DOM、JSX等。那么接下来我们就来学习一下这门框架...
  • sinat_17775997
  • sinat_17775997
  • 2016-09-02 14:05:10
  • 450

react 报错原因

1.没有实现标签的闭合,检查是否有标签结束没有闭合 Uncaught Error: Module build failed: SyntaxError: E:/react/src/App.js:...
  • AliceWu_1111
  • AliceWu_1111
  • 2018-03-14 18:31:12
  • 102
收藏助手
不良信息举报
您举报文章:react单页应用不想出现竖直滚动条的解决方案
举报原因:
原因补充:

(最多只允许输入30个字)