react滚动条开发 适配PC 和 移动端的滚动 显示隐藏header和footer/滚动显隐公用组件

功能描述：

移动端时，上滚则显示footer,下滚则隐藏footer

PC端时，上滚则显示header,下滚则隐藏header。

 

xx.js

import React, { Component } from 'react';

import {

BrowserRouter as Router,

withRouter,

} from 'react-router-dom';

 

import isPhone from '@common/js/until/isPhone';

import './index.scss';

 

class Footer extends Component {

constructor(props) {

super(props);

this.state = {

isMoblie:false,

currentNum: 0,

show: true

}

 

}

 

componentWillMount(){

let isMoblie = isPhone();

this.setState({

isMoblie:isMoblie

})

 

}

componentDidMount() {

// if(this.state.isMoblie){

// }

window.addEventListener('scroll', ()=>this.scrollHandler());

}

componentWillUnmount(){

window.removeEventListener('scroll',()=>this.scrollHandler());

}

scrollHandler() {

let scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

if(scrollTop < this.state.currentNum){

// console.log("向上滚")

this.setState({

currentNum:scrollTop,

show: false

})

}

if(scrollTop > this.state.currentNum){

// console.log("向下滚")

this.setState({

currentNum:scrollTop,

show: true

})

}

}

goColor(){

this.setState({

currentNum:0,

show: true

})

window.scrollTo(0,0);

this.props.history.push('/docs/components/button');

}

goLayout(){

this.setState({

currentNum:0,

show: true

})

window.scrollTo(0,0);

this.props.history.push('/docs/components/button4');

}

 

render() {

const {isMoblie,show} = this.state;

return (

{show ?

this.goColor()}>颜色

this.goLayout()}>布局

: ''}

);

}

}

 

export default withRouter( Footer );

 

 

xx.scss

.footer-box{

position: fixed;

top: 78px;

width:100%;

white-space: nowrap;

background-color:#ffffff;

overflow: hidden;

margin-left:240px;

.PC-float-right{

margin-right:400px;

float:right;

img{

width:18px;

height: 19px;

margin: 0 10px;

display: inline-block;

vertical-align: middle;

}

.footer-color-left{

// float:left;

font-family: PingFang-SC-Medium;

font-size: 16px;

color: #4C87DA;

line-height: 36px;

display: inline-block;

margin-right:100px;

}

.footer-layout-right{

// float:right;

font-family: PingFang-SC-Medium;

font-size: 16px;

color: #4C87DA;

line-height: 36px;

display: inline-block

}

}

}

.footer-wrap{

position: fixed;

bottom: 0px;

width:100%;

white-space: nowrap;

overflow: hidden;

background-color:#ffffff;

height: 54px;

img{

width:18px;

height: 19px;

margin: 0 10px;

display: inline-block;

vertical-align: middle;

}

.footer-color-left{

float:left;

font-family: PingFang-SC-Medium;

font-size: 16px;

color: #4C87DA;

line-height: 36px;

display: inline-block

}

.footer-layout-right{

float:right;

font-family: PingFang-SC-Medium;

font-size: 16px;

color: #4C87DA;

line-height: 36px;

display: inline-block

}

}