首页 > 其他 > 详细

vue:实现竖向滚动条效果并实现锚点定位跳转

时间:2021-09-07 18:44:18      阅读:10      评论:0      收藏:0      [点我收藏+]

一、左侧使用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:实现竖向滚动条效果并实现锚点定位跳转

原文:https://www.cnblogs.com/zwh0910/p/15235234.html

(0)
(0)
   
举报
评论 一句话评论(0
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!