一、左侧使用ul和li标签来实现菜单栏的效果
<template> <div class="container"> <el-container> <el-aside width="350px" class="aside"> <ul> <li>账号注册 <ul> <li @click=‘returnTop1‘>企业注册</li> <li @click=‘returnTop2‘>用户注册</li> </ul> </li> <li>密码管理 <ul> <li>修改密码</li> <li>忘记密码</li> </ul> </li> <li>账号注册 <ul> <li>企业注册</li> <li>用户注册</li> </ul> </li> <li>密码管理 <ul> <li>修改密码</li> <li>忘记密码</li> </ul> </li> <li>账号注册 <ul> <li>企业注册</li> <li>用户注册</li> </ul> </li> <li>密码管理 <ul> <li>修改密码</li> <li>忘记密码</li> </ul> </li> <li>账号注册 <ul> <li>企业注册</li> <li>用户注册</li> </ul> </li> <li>密码管理 <ul> <li>修改密码</li> <li>忘记密码</li> </ul> </li> <li>账号注册 <ul> <li>企业注册</li> <li>用户注册</li> </ul> </li> <li>密码管理 <ul> <li>修改密码</li> <li>忘记密码</li> </ul> </li> <li>账号注册 <ul> <li>企业注册</li> <li>用户注册</li> </ul> </li> <li>密码管理 <ul> <li>修改密码</li> <li>忘记密码</li> </ul> </li> <li>账号注册 <ul> <li>企业注册</li> <li>用户注册</li> </ul> </li> <li>密码管理 <ul> <li>修改密码</li> <li>忘记密码</li> </ul> </li> </ul> </el-aside> <el-main class="main"> <div id="header1"> 生产企业Main 1<br/> 1<br/> 1<br/> 1<br/> 1<br/> 1<br/> 1<br/> 1<br/> 1<br/> 1<br/> 1<br/> 1<br/> 1<br/> 1<br/> 1<br/> 1<br/> 1<br/> 1<br/> 1<br/> 1<br/> 1<br/> 1<br/> 1<br/> 1<br/> 1<br/> 1<br/> 1<br/> 1<br/> 1<br/> 1<br/> 1<br/> 1<br/> 1<br/> 1<br/> 1<br/> </div> <div id="header2"> 2<br/> 2<br/> 2<br/> 2<br/> 2<br/> 2<br/> 2<br/> 2<br/> 2<br/> 2<br/> 2<br/> 2<br/> 2<br/> 2<br/> 2<br/> 2<br/> 2<br/> 2<br/> 2<br/> </div> </el-main> </el-container> </div> </template>
通过el-aside标签的width属性来控制侧边栏的宽度。
ul去掉前面的点:
ul{ list-style-type: none; }
二、侧边栏和主体区域实现滚动条效果
.aside{ height: 100vh; overflow-y:scroll; background-color: ghostwhite; } .main{ height: 100vh; /*-webkit-overflow-scrolling: touch;*/ overflow-y:scroll; }
注意:要有高度属性,1vh = 1%,vh表示视口高度viewpoint height;1vw = 1%,vw表示视口宽度viewpoint width,
overflow : scroll ; /*任何时候都强制显示滚动条*/ overflow : auto ; /*需要的时候会出现滚动条*/ overflow-x: auto ; /*控制X方向的滚动条*/ overflow-y: auto ; /*控制Y方向的滚动条*/
还可以使用-webkit-overflow-scrolling属性来实现滚动效果,
-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.
auto: 使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止。
touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。
三、vue中实现锚点定位跳转
methods: { returnTop1(){ document.querySelector("#header1").scrollIntoView(true); }, returnTop2(){ document.querySelector("#header2").scrollIntoView(true); } }
其中:
document.querySelector(“要返回地方的id”).scrollIntoView(true);
HTML5选择了scrollIntoView() 作为标准方法,scrollIntoView()可以在所有的HTML元素上调用。
通过滚动浏览器窗口或某个容器元素,调用元素就可以出现在视窗中。
如果给该方法传入true作为参数,或者不传入任何参数,那么 窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平。
如果给该方法传入false作为参数,调用元素会尽可能全部出现在视口中(可能的话,调用元素的底部会与视口的顶部齐平)不过顶部不一定齐平。
效果如下: