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

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

一、左侧使用ul和li标签来实现菜单栏的效果

<template>
    <div class="container">
        <el-container>
            <el-aside width="350px" class="aside">
                      <ul>
                        <li>账号注册
                            <ul>
                                <el-link :underline="false"><li @click=\'lookUp("#header1")\' 
　　　　　　　　　　　　　　　　　　　　　　　　　　:class="{active: nowId === \'#header1\' ? isActive : \'\'}">企业注册</li></el-link><br/>
                                <el-link :underline="false"><li @click=\'lookUp("#header2")\' 
　　　　　　　　　　　　　　　　　　　　　　　　　　:class="{active: nowId === \'#header2\' ? isActive : \'\'}">用户注册</li></el-link>
                            </ul>
                        </li>
                      </ul>
                </el-aside>
            <el-main class="main">
                <div id="header1" class="header1">
                    <div class="firstTitle">一、准备工作</div><br>
                    <div class="contentStyle">
                        &nbsp;&nbsp;&nbsp;&nbsp;系统操作前，需先打开浏览器，进入药品物联网供应保障管理平台登录页面。<br/>
                    </div>
                    <div class="secondTitle">&nbsp;&nbsp;1. 已有账号</div><br>
                    &nbsp;&nbsp;&nbsp;&nbsp;如果已有账号，输入用户名和密码，点击[登录]，成功登录系统。<br/>
                    <el-image :src="require(\'@/assets/images/manualPic/login.png\')" fit="fill"></el-image>
                </div>
                <div id="header2" class="header2">
                    <div class="secondTitle">&nbsp;&nbsp;2. 没有账号</div><br>
                    &nbsp;&nbsp;&nbsp;&nbsp;如果没有账号，需要点击[免费注册]，进行账号注册。<br/>
                    <el-image :src="require(\'@/assets/images/manualPic/register.png\')" fit="fill"/>
                </div>
                <el-card class="box-card" shadow="hover">
                    <el-link :underline="false">
                        <el-tooltip content="返回首页" placement="top">
                            <span class="el-icon-thumb" @click="backToIndex"></span>
                        </el-tooltip>
                    </el-link>
                </el-card>
            </el-main>
        </el-container>
    </div>
</template>

注意：

1）、通过el-aside标签的width属性来控制侧边栏的宽度。

2）、使用el-link标签使菜单有可点击的效果，鼠标放上去变成小手。通过将underline属性值设置为false去掉下划线。

3）、通过class的属性绑定来实现是否激活的效果，代码如下：

:class="{active: nowId === \'#header1\' ? isActive : \'\'}"

data数据模型中isActive设置为true

active的样式：

.active{
                 color: #409EFF;
            }

4）、el-image引入图片需要使用require。

5）、返回首页的效果的实现：使用el-card实现悬浮的效果，使用el-link来实现可点击的效果，使用el-tooltip实现消息提示，里面放一个elementUI的icon。

样式如下：

.box-card {
                /*让小手居中显示*/
                display: flex;
                justify-content: center;
                align-items: center;
                /*设置圆形的大小和定位*/
                height: 60px;
                width: 60px;
                border-radius: 50%;
                position: fixed;
                bottom: 35px;
                right: 15px;
                /*padding-left: 20px;*/
                /*float: right;*/
                /*设置圆形的背景色和阴影*/
                background-color: #f2f5f6;
                box-shadow: 0 0 6px rgba(0,0,0, .12);
                /*手表放上去时光标的形状*/
                cursor: pointer;
                span{
                    /*设置小手的大小*/
                    font-size: 30px;
                    /*color: #1989fa;*/
                }
            }

6）、ul去掉前面的点：

ul{
        list-style-type: none;
    }

二、侧边栏和主体区域实现滚动条效果

.aside{
        height: calc(100vh-52px);
        overflow-y:scroll;
        background-color: ghostwhite; // 鬼白
    }
    .main{
        height: calc(100vh-52px); // 取消浏览器的滚动条，只需修改主体区域的高度即可，将整个视口的高度减去顶部导航条的高度即可
        /*-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: {
            lookUp(id){
                this.nowId = id
                document.querySelector(id).scrollIntoView(true);
            },
            backToIndex(){
                this.$router.push(\'index\') // 编程式导航
            }
        }

其中：

document.querySelector(“要返回地方的id”).scrollIntoView(true);

HTML5选择了scrollIntoView() 作为标准方法,scrollIntoView()可以在所有的HTML元素上调用。

通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视窗中。

如果给该方法传入true作为参数，或者不传入任何参数，那么 窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平。

如果给该方法传入false作为参数，调用元素会尽可能全部出现在视口中（可能的话，调用元素的底部会与视口的顶部齐平）不过顶部不一定齐平。

效果如下：

以上是 vue：实现竖向滚动条效果并实现锚点定位跳转 的全部内容， 来源链接： utcz.com/z/377816.html

回到顶部