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 (
<div>
{show ?
<div className={isMoblie?"footer-wrap":"footer-box"}>
<div className="PC-float-right">
<div className="footer-color-left" onClick={()=>this.goColor()}><img src={require('../img/left-arrow.png')}/>顏色</div>
<div className="footer-layout-right" onClick={()=>this.goLayout()}>佈局<img src={require('../img/right-arrow.png')}/></div>
</div>
</div>
: ''}
</div>
);
}
}
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
}
}