最近在 react 项目中有要实现全屏滚动的效果，为了节省时间

在度娘的指引下引入了 react-fullpage

但是插件终究是插件，在怪异的需求之下，再好的插件也得跪。

因为fullPage用了锚点，而 react路由又使用了 HashHistory

so 被逼无奈只好自己手撸一个了

在线预览

因为vue相对简单，所以就说说react版的吧

全屏滚动，说到底其实就是一个竖屏的轮播图而已

首先需要定义 state

this.state={
    bannerList:[                 //盒子背景颜色
        {
            bg:"#f6f6f6"
        },
        {
            bg:"#87d9e1"
        },
        {
            bg:"#8185d7"
        },
        {
            bg:"#e187cf"
        }
    ],
    offsetheight:document.documentElement.clientHeight,    //获取当前页面的高度
    fullPage:0,           //当前在第几页
    fullPageNum:false,        //是否在滑动
}

然后是静态页面的布局

HTML

render() {
    let fullPage=this.state.bannerList.map((i,index)=>{
        return <div key={index} style={{'height':this.state.offsetheight+'px','background':i.bg}}></div>
    })     //使用map来循环添加dom
    let fullList=this.state.bannerList.map((i,index)=>{
        return <div key={index} className={this.state.fullPage==index?'color':''} onClick={this.pageInfo.bind(this,index)}></div>
    })
    return (
        <div className="section" style={{'height':this.state.offsetheight+'px'}}>
            <div className="container" style={{'transform': 'translate3d(0px,-'+ this.state.fullPage*this.state.offsetheight +'px, 0px)'}}>
                {fullPage}
            </div>
            <div className="fixed-list">
                {fullList}
            </div>
        </div>
    );
}

css

.section{
    overflow: hidden;
}
.container{
    width: 100%;height: 100%;
    position: relative; transform: translate3d(0px, 0px, 0px); transition: all 1000ms ease;
}
.fixed-list{
    position: fixed;
    top: 40%;right: 20px;
}

.fixed-list div{
    width: 20px;height: 20px;background:#ccc;border-radius: 50%;margin-bottom: 20px;
}

.fixed-list div.color{
    background:#000;
}

竖屏轮播图，当然得有焦点点击啦

//
//点击左侧小点时跳转到相应的page
//
pageInfo(index){
    this.setState({
        fullPage:index
    })
}

然后去定义鼠标滚动事件

//
//鼠标事件
//
scroll(e){
    e=e || window.event;
    //
    //是否正在滑动
    //
    if(this.state.fullPageNum){
        return false;
    }
    //
    //   e.wheelDelta为负数时向下滑动
    //
    if(e.wheelDelta<0){
        if(this.state.fullPage>=3){
            return false
        }
        this.setState({fullPageNum:true})
        this.pageInfo(this.state.fullPage+1);
        //
        //  css设置动画事件为1000，所以等到1000ms后滚动状态为false
        //
        setTimeout(()=>{
            this.setState({fullPageNum:false})
        },1000)
    //
    //   否则就是向上划
    //
    }else{
        if(this.state.fullPage<=0){
            return false;
        }
        this.setState({fullPageNum:true});
        this.pageInfo(this.state.fullPage-1);
        setTimeout(()=>{
            this.setState({fullPageNum:false})
        },1000)
    }
}

最后在react componentDidMount生命周期里为doucment添加鼠标滚动事件

componentDidMount(){
        //
        //添加鼠标滑动事件
        //
        if(document.addEventListener){
            document.addEventListener('DOMMouseScroll',this.scroll.bind(this),false);
        }
        window.onmousewheel=document.onmousewheel=this.scroll.bind(this);
    }

至此一个简单的react 竖屏滚动demo就完成啦

React版源码链接
Vue版源码链接

因为只是简单实现，所以有很多功能还缺失。
有什么建议或者疑问请在评论区不吝赐教。

以上。