标签：vue 滚动 用户注册 滚动条 密码 注册 跳转 overflow
一、左侧使用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作为参数，调用元素会尽可能全部出现在视口中（可能的话，调用元素的底部会与视口的顶部齐平）不过顶部不一定齐平。
效果如下：
标签：vue,滚动,用户注册,滚动条,密码,注册,跳转,overflow 来源： https://www.cnblogs.com/zwh0910/p/15235234.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。