vue 点击滑动到页面指定位置(点击下滑滚动)的功能

需求

点击页面上的 文字 滑动到页面指定位置
在这里插入图片描述

三种方法

      document.getElementById('show').scrollIntoView() // 默认滚动至节点置顶document.getElementById('show').scrollIntoView(false) // 默认滚动至节点显示document.getElementById('show').scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" }); // 见下文

scrollIntoView() 方法的使用

scrollIntoView([alignToTop,scrollIntoViewOptions ]) 方法可以携带最多两个参数;

alignToTop 可选

  如果为 true,元素的顶端将和其所在滚动区的可视区域的顶端对齐。这是这个参数的默认值。如果为 false,元素的底端将和其所在滚动区的可视区域的底端对齐。

scrollIntoViewOptions 可选

  behavior 可选定义动画过渡效果,auto 或 smooth 之一。默认为 auto。block 可选定义垂直方向的对齐,start、center、end 或 nearest 之一。默认为 start。inline 可选定义水平方向的对齐,start、center、end 或 nearest 之一。默认为 nearest。

示例

<div @click="switchMenu('1')">产品服务</div>
<div id="show" ref="view">展示</div>

1、利用scrollIntoView()方法,该方法将调用它的元素滚动到浏览器窗口的可见区域(根据其他元素的布局,元素可能无法完全滚动到顶部或底部)
ps:页面可滚动时才有用!!!可通过设置css实现

document.getElementById("show").scrollIntoView() 直接跳转到指定位置,效果比较生硬
methods: {switchMenu(index) {console.log(111, index)switch (index) {case 0:breakcase 1:document.getElementById("show").scrollIntoView();breakcase 2:this.$message.success("敬请期待")breakcase 3:breakdefault:break}}},

缓慢移动至目标

 function switchMenu () {document.getElementById('kinds').scrollIntoView({ behavior: 'smooth' })}

scrollIntoView提供了scrollIntoViewOptions对象参数

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/183373.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在 LangChain 尝试了 N 种可能后,我发现了分块的奥义!

分块&#xff08;Chunking&#xff09;是构建检索增强型生成&#xff08;RAG&#xff09;应用程序中最具挑战性的问题。分块是指切分文本的过程&#xff0c;虽然听起来非常简单&#xff0c;但要处理的细节问题不少。根据文本内容的类型&#xff0c;需要采用不同的分块策略。 在…

不用流氓软件,如何在户外使用手机听下载到家中电脑里的音乐文件呢?

文章目录 本教程解决的问题是&#xff1a;按照本教程方法操作后&#xff0c;达到的效果是本教程使用环境&#xff1a;1 群晖系统安装audiostation套件2 下载移动端app 很多老铁想在上班路上听点喜欢的歌或者相声解解闷儿&#xff0c;于是打开手机上的某雅软件和某音乐软件点进去…

【监控指标】监控系统-prometheus、grafana。容器化部署。go语言 gin框架、gRPC框架的集成

文章目录 一、监控有哪些指标二、prometheus、grafana架构Prometheus 组件Grafana 组件架构优点 三、安装prometheus和node-exporter1. docker pull镜像2. 启动node-exporter3. 启动prometheus 四、promql基本语法五、grafana的安装和使用1. 新建空文件夹grafana-storage&#…

2023年化工自动化控制仪表证考试题库及化工自动化控制仪表试题解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2023年化工自动化控制仪表证考试题库及化工自动化控制仪表试题解析是安全生产模拟考试一点通结合&#xff08;安监局&#xff09;特种作业人员操作证考试大纲和&#xff08;质检局&#xff09;特种设备作业人员上岗证…

SwiftUI Swift 多个 sheet

今天做一个多个 sheet 的效果&#xff0c;点击下面三个按钮打开不同的 sheet 。 Show me the code import SwiftUIenum CurrentActiveSheet: Identifiable {case add, edit, deletevar id: Int {hashValue} }struct MoreSheet: View {State var currentActiveSheet: CurrentAc…

Effective C++ 条款5:了解C++默默编写并调用哪些函数

编译器为一个空类声明一个拷贝构造函数、一个拷贝赋值操作符和一个析构函数&#xff0c;如果没有声明任何构造函数&#xff0c;编译器也会声明一个默认构造函数&#xff0c;所有的这些函数都是public且inline 因此&#xff0c;如果写下&#xff1a; class Empty{}&#xff1b;…

变电站电表采集如何避免干扰?

随着电力系统的快速发展&#xff0c;智能电网的建设不断推进&#xff0c;电力设备自动化水平不断提高。电表采集系统作为电力系统的重要组成部分&#xff0c;承担着对用电量进行准确监测的任务。然而&#xff0c;在实际应用中&#xff0c;变电站电表采集系统容易受到各种干扰&a…

初阶JavaEE(14)表白墙程序

接上次博客&#xff1a;初阶JavaEE&#xff08;13&#xff09;&#xff08;安装、配置&#xff1a;Smart Tomcat&#xff1b;访问出错怎么办&#xff1f;Servlet初识、调试、运行&#xff1b;HttpServlet&#xff1a;HttpServlet&#xff1b;HttpServletResponse&#xff09;-C…

falsk框架中安装flask-mysqldb报错解决方案

错误示例 我的是py37版本&#xff0c;无法直接安装flask-mysqldb pip install flask-mysqldb报错如下 解决方案 先去第三方库 https://www.lfd.uci.edu/~gohlke/pythonlibs/#mysqlclient 下载mysqlclient 这个是我的版本 mysqlclient-1.4.6-cp37-cp37m-win_amd64.whl 下…

VR博物馆:让博物馆传播转化为品牌影响力

随着VR技术的不断进步&#xff0c;VR全景技术已经成为了文化展示和传播的一项重要工具&#xff0c;相较于传统视频、图文等展现方式&#xff0c;VR全景体验更加直观、便捷&#xff0c;其中蕴涵的信息量也更加丰富&#xff0c;这也为公众了解博物馆和历史文化带来了更为深刻的体…

Spring Cloud智慧工地源码,利用计算机技术、互联网、物联网、云计算、大数据等新一代信息技术开发,微服务架构

智慧工地系统充分利用计算机技术、互联网、物联网、云计算、大数据等新一代信息技术&#xff0c;以PC端&#xff0c;移动端&#xff0c;设备端三位一体的管控方式为企业现场工程管理提供了先进的技术手段。让劳务、设备、物料、安全、环境、能源、资料、计划、质量、视频监控等…

springboot初始化

一、 SpringBean 1. Spring Bean 1) Bean定义 Bean是什么&#xff0c;Bean是特殊的对象&#xff0c;交由Spring管理的Java对象&#xff0c;这类对象在创建的时候会根据spring的一些注解&#xff0c;和IOC&#xff0c;属性如果使用Autowired的话&#xff0c;会自动赋值。Bean…

基于 golang 从零到一实现时间轮算法 (三)

引言 本文参考小徐先生的相关博客整理&#xff0c;项目地址为&#xff1a; https://github.com/xiaoxuxiansheng/timewheel/blob/main/redis_time_wheel.go。主要是完善流程以及记录个人学习笔记。 分布式版实现 本章我们讨论一下&#xff0c;如何基于 redis 实现分布式版本的…

AD教程 (九)导线及NetLabel的添加

AD教程 &#xff08;九&#xff09;导线及NetLabel的添加 添加导线 绘制导线 点击放置,选择线&#xff0c;或者直接CtrlW快速绘制注意要与绘图工具中的线区别开来&#xff0c;导线是具有电气属性的&#xff0c;绘图工具中的线没有电气属性&#xff0c;只是辅助线绘制导线过程…

论文阅读:LOGO-Former: Local-Global Spatio-Temporal Transformer for DFER(ICASSP2023)

文章目录 摘要动机与贡献具体方法整体架构输入嵌入生成LOGO-Former多头局部注意力多头全局注意力 紧凑损失正则化 实验思考总结 本篇论文 LOGO-Former: Local-Global Spatio-Temporal Transformer for Dynamic Facial Expression Recognition发表在ICASSP&#xff08;声学顶会…

帧间快速算法论文阅读

Low complexity inter coding scheme for Versatile Video Coding (VVC) 通过分析相邻CU的编码区域&#xff0c;预测当前CU的编码区域&#xff0c;以终止不必要的分割模式。 &#x1d436;&#x1d448;1、&#x1d436;&#x1d448;2、&#x1d436;&#x1d448;3、&#x…

SpringCloudAlibaba - 项目完整搭建(Nacos + OpenFeign + Getway + Sentinel)

目录 一、SpringCloudAlibaba 项目完整搭建 1.1、初始化项目 1.1.1、创建工程 1.1.2、配置父工程的 pom.xml 1.1.3、创建子模块 1.2、user 微服务 1.2.1、配置 pom.xml 1.2.2、创建 application.yml 配置文件 1.2.3、创建启动类 1.2.4、测试 1.3、product 微服务 1…

【江协科技-用0.96寸OLED播放知名艺人打篮球视频】

Python进行视频图像处理&#xff0c;通过串口发送给stm32&#xff0c;stm32接收数据&#xff0c;刷新OLED进行显示。 步骤&#xff1a; 1.按照接线图连接好硬件 2.把Keil工程的代码下载到STM32中 3.运行Python代码&#xff0c;通过串口把处理后的数据发送给STM32进行显示 …

如何使用 JMeter 进行 HTTPS 请求测试?

本文将介绍如何使用 JMeter 测试 HTTPS 请求&#xff0c;并提供相关的技巧和注意事项。 在进行性能测试时&#xff0c;很多网站都采用了 HTTPS 协议。当我们测试 HTTPS 请求&#xff0c;如果服务端开启了双向认证&#xff0c;则需要客户端发送请求时带上证书。本文介绍如何在 …

cordova Xcode打包ios以及发布流程(ionic3适用)

第一步 1、申请iOS证书 2、导入证书到钥匙串 第二步 1、xcode配置iOS证书 1.1用Xcode打开你的项目&#xff08;我的Xcode版本是新版&#xff09; 修改如下图 回到基本信息设置界面&#xff0c;Bundie 这项填写&#xff0c;最先创建的那个appid&#xff0c;跟创建iOS描述文件时选…