本文实例为大家分享了vue实现全屏滚动效果(的具体代码,供大家参考,具体内容如下
<强>是什么
网页的一个页面占据一屏的宽高,多个页面上下或者左右拼接在一起。当滑动鼠标滚轮,或点击导航按钮时,可以平滑到对应的页面。
<强>
<>强实现原理
使用mousewheel DOMMouseScroll(火狐用)监听鼠标滚动事件,当鼠标上下的滚动的时候,当前的页面transformY(屏高)或者transformX(屏宽)
<强>代码实现
HTML
& lt; template>
& lt; div类=" fullPage " ref=癴ullPage”比;
& lt; div
类=" fullPageContainer "
ref=" fullPageContainer "
@mousewheel=" mouseWheelHandle "//监听鼠标事件
@DOMMouseScroll=" mouseWheelHandle "//监听鼠标事件
比;
& lt; div类="部分section1 "祝辞1 & lt;/div>
& lt; div类="部分section2 "祝辞2 & lt;/div>
& lt; div类="部分section3 "在3 & lt;/div>
& lt; div class="节第四单元“祝辞4 & lt;/div>
& lt;/div>
& lt;/div>
& lt;/template>
JS
& lt; script>
出口默认{
名称:“家”,
数据(){
返回{
fullpage: {
当前:1、//当前的页面编的号
isScrolling:假的,//是否在滚动,是为了防止滚动多页,需要通过一个变量来控制是否滚动
δy: 0//返回鼠标滚轮的垂直滚动量,保存的鼠标滚动事件的deleteY,用来判断是往下还是往上滚
｝
};
},
方法:{
next(){//往下切换
让len=4;//页面的个数
如果(this.fullpage。当前的+ 1 & lt;=len){//如果当前页面编号+ 1小于总个数,则可以执行向下滑动
this.fullpage。当前+=1;//页面+ 1
this.move (this.fullpage.current);//执行切换
｝
},
pre(){//往上切换
如果(this.fullpage。当前- 1比;0){//如果当前页面编1号大于0,则可以执行向下滑动
this.fullpage。当前-=1;//页面+ 1
this.move (this.fullpage.current);//执行切换
｝
},
移动(指数){
this.fullpage。isScrolling=true;//为了防止滚动多页,需要通过一个变量来控制是否滚动
this.directToMove(指数);//执行滚动
setTimeout(()=比;{//这里的动画是1 s执行完,使用setTimeout延迟1 s后解锁
this.fullpage。isScrolling=false;
},1010);
},
directToMove(指数){
美元让身高=２慰嘉南譡“fullPage”] .clientHeight;//获取屏幕的宽度
参让scrollPage=? (“fullPageContainer”);//获取执行tarnsform的元素
让scrollHeight;//计算滚动的告诉,是往上滚还往下滚
scrollHeight=-(指数- 1)*身高+“px”;
scrollPage.style。变换=' translateY ($ {scrollHeight})”;
this.fullpage。当前=指数;
},
mouseWheelHandle(事件){//监听鼠标监听//添加冒泡阻止
事件让evt=| | window.event;
如果(evt.stopPropagation) {
evt.stopPropagation ();
其他}{
evt。returnValue=https://www.yisu.com/zixun/false;
｝
如果(this.fullpage.isScrolling){//判断是否可以滚动
返回错误;
｝
让e=事件。originalEvent | |事件;
this.fullpage.deltaY=e.deltaY | | e.detail;//Firefox使用细节
如果(this.fullpage.deltaY> 0) {
this.next ();
}如果(this.fullpage.deltaY <0) {
this.pre ();
｝
｝
｝
};
CSS
& lt; scoped>风格;
.fullPage {
高度:100%;//一定要设置,保证占满
溢出:隐藏;//一定要设置,多余的先隐藏
background - color: rgb (189、211、186);
｝
.fullPageContainer {
宽度:100%;
高度:100%;
过渡:所有线性0.5秒;
｝
.section {
宽度:100%;
高度:100%;
背景位置:中心中心;
平铺方式:不再重演;
｝
.section1 {
background - color: rgb (189、211、186);
背景:url(“。/资产/intro-bg.jpg”);
｝
.section1 .secction1-content {
颜色:# fff;
text-align:中心;
位置:绝对的;
上图:40%;
右:0;
左:0;
｝
.secction1-content h2 {
字体大小:40像素;
padding-bottom: 30 px;
｝
.secction1-content p {
字体大小:20 px;
｝
.section2 {
背景颜色:rgb(44, 48岁的43);
｝
.section3 {
background - color: rgb (116、104、109);
｝
.section4 {
background - color: rgb (201、202、157);
｝
& lt;/style>
