vue设置页面滚动高度_vue中获取滚动高度或指定滚动到某位置

2023-11-08

1.点击某个标签,滚动到某个具体位置

switchHeight(num) {

this.selectNum = num;

if (num == 0) {

document.getElementById("identifer_one").scrollIntoView();

} else {

document.getElementById("hotel_two").scrollIntoView();

}

},

2.获取滚动高度,

首先要先写监听事件:

mounted() {

window.addEventListener("scroll", this.handleScroll, true); //监听滚动事件

},

处理监听事件:e.target.scrollTop是目标对象的滚动高度

handleScroll(e) {

let serviceTop = 44;

let hotelTop = 344;

if (e.target.scrollTop > 44 && e.target.scrollTop < 344) {

this.selectNum = 0;

}

if (e.target.scrollTop > 344) {

this.selectNum = 1;

}

}

},

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue设置页面滚动高度_vue中获取滚动高度或指定滚动到某位置 的相关文章

  • 使用高防CDN有什么用处?

    近年来 随着互联网的快速发展 越来越多的企业开始发展互联网业务 出现了各种各样的网站和web程序 互联网改变了人们的生活习惯与消费行为 人们也是越来越依赖网络 而这些改变让互联网产业得到更加迅速发展 而随着互联网技术的发展提高 用户在访问网
  • QCombox隐藏某一项

    有事想隐藏下拉选项的某一项 而又不改变索引 可以使用如下方法 QListView view qobject cast
  • 分布式爬虫scrapy-redis所踩过的坑

    一 安装redis 因为是在CentOS系统下安装的 并且是服务器 遇到的困难有点多不过 1 首先要下载相关依赖 首先先检查是否有c语言的编译环境 你问我问什么下载这个 我只能说它是下载安装redis的前提 就像水和鱼一样 rpm q gc
  • IOS用CGContextRef画各种图形(文字、圆、直线、弧线、矩形、扇形、椭圆、三角形、圆角矩形、贝塞尔曲线、图片)

    转载自 任海丽的博客 原址 http blog csdn net rhljiayou article details 9919713 首先了解一下CGContextRef An opaque type that represents a Q
  • 阿里云ECS服务器提示高危漏洞问题的处理方式(Linux)

    修复过程如下 root登陆 yum check update 查看可升级的系统软件 yum upgrade 升级所有可升级的系统软件 等待执行完成 备注 yum update 升级所有包同时也升级软件和系统内核 yum upgrade 只升
  • openssl生成ca证书,以及过程中遇到的问题总结

    相关说明 转载于 http www cnblogs com yangyquin p 5284530 html 在原有的基础上总结了一些本人安装过程中的一些问题 参考资料 http blog sina com cn s blog 7ea5cb
  • JSON数据交互方式

    目录 一 JSON的特点 二 前后端开发推荐使用工具ApiPost 扩展 xml与json的区别 三 JSON语法格式 语法注意点 四 在html中定义json数据类型 1 单个实体 gt JSON数据 2 数组实体 gt JSON数据 3
  • 龙芯比赛vivado调试试错手记

    文章目录 第一个阶段 除掉所有的语法错误 第二个阶段 调出绿线 第三个阶段 调出trace对比机制 第四阶段 各种调试 第一个阶段 除掉所有的语法错误 刚开始在文件夹里加了我的CPU文件但是在工程里面没添加 然后报错 找不到你的的CPU I
  • 数学基础--均值、方差、标准差、协方差

    1 简介 统计学中最核心的概念之一是 标准差及其与其他统计量 如方差和均值 之间的关系 本文将对标准差这一概念提供直观的视觉解释 在文章的最后我们将会介绍协方差的概念 2 概念介绍 均值 均值 均值就是将所有的数据相加求平均 求得一个样本数
  • 网易数据分析高级总监:10年数据分析老司机的深度思考!

    关注上方 肉眼品世界 选择星标 本文整理自知乎专栏 突破数据分析 1 作者是网易数据分析高级总监贺志 我是一个数据从业者 很早以前就想把自己在工作和学习中的心得做个总结 一方面是对自己过往经历的一个总结和回顾 一方面最近几年大数据是越来越火
  • java定义正则表达式,JAVA——正则表达式基本语法

    一 正则表达式概念 使用单个字符串来描述 匹配一系列符合某个语法规则的字符串 二 正则表达式常用字符 1 字符类 如 abc 将字符进行归类 可以出现 中的其中一个 对abc其中一个进行匹配 abc 对不是abc的字符进行匹配 2 范围类
  • python中获取cookie的两种方法

    第一种是利用selenium phantomjs无界面浏览器的形式访问网站 再获取cookie值 导入模块 from selenium import webdriver driver webdriver PhantomJS url http
  • apache camel详解

    apache camel 两篇比较详细的介绍 上 http www uml org cn zjjs 201801223 asp 中 http www uml org cn zjjs 201801222 asp apache camel比较详
  • Jenkins与DevOps持续交付详解

    一 Jenkins简介 1 Jenkins简介 Jenkins是一个开源项目 提供了一种易于使用可扩展的持续集成系统 使开发者从繁杂的集成中解脱出来 专注于更为重要的业务逻辑实现上 同时Jenkins能实时监控集成时存在的错误 提供详细的日
  • RabbitMQ学习总结

    RabbitMQ 简介 消息中间件 什么是中间件呢 非底层操作系统软件 非业务应用软件 不是直接给最终用户使用的 不能直接给客户带来价值的软件统称为中间件 什么是消息中间件 消息中间件利用高效可靠的消息传递机制进行平台无关的数据交流 并基于
  • Kali下使用一行python代码实现简易的http服务器

    比如我在kali的tmp目录下执行下列代码 就可以在当前目录开启一个http服务 python m SimpleHTTPServer 然后就可以从另一台机器访问kali的ip下 tmp目录的内容 这样就可以传输文件等操作
  • html2canvas多个id,在同一个canvas里显示多个图形

    代码 html js function id return document getElementById id 绘制正多边形的封装函数 window onload function var cnv1 canvas1 var cxt1 cn
  • kali linux子系统的网络配置

    kali linux子系统的网络配置 配置kali子系统时 踩了一些坑 主要是网络配置时卡了挺久 因为wsl2安装时默认为NAT模式 而在测试过程中 经常会需要反弹shell或开启服务让靶机下载文件之类的操作 因此最好使用桥接模式 kali
  • html鼠标背景特效,6种鼠标滑过按钮背景动画特效

    插件描述 这是一组效果非常酷的鼠标滑过按钮背景动画特效 该特效中 当鼠标滑过按钮时 使用CSS3 animation来动画backgroundsize和backgroundposition属性 来制作各种背景动画效果 简要教程 这是一组效果

随机推荐

  • 判断两个字符串是否相等的更好方法

    在Java中 判断两个字符串是否相等有几种常见的方法 以下是其中一些更好的方法 1 使用equals 方法 java String str1 Hello String str2 World if str1 equals str2 字符串相等
  • SpringMVC的请求(获取参数以及静态资源访问)

    SpringMVC的请求 SpringMVC的请求 1 SpringMVC的请求 获得请求参数 请求参数类型 理解 2 SpringMVC的请求 获得请求参数 获得基本类型参数 应用 3 SpringMVC的请求 获得请求参数 获得POJO
  • systemctl 命令详解及使用教程

    在本教程中 我们将向您介绍在运行systemd的linux系统上如何使用systemctl命令工具有效的控制系统和服务 Systemctl 介绍 Systemctl是一个systemd工具 主要负责控制systemd系统和服务管理器 Sys
  • VM虚拟机-安装Linux、windows、windows server超详细步骤演示

    本文章所展示的workstation为15 5版本 Linux为Redhat7 4版本 Windows为win10版本 windows server 2012版本 其他版本的安装过程都大致同理 目录 VMware Workstation安装
  • Linux编译FFmpeg

    Linux编译FFmpeg 1 下载FFmpeg源码 FFmpeg源码下载地址 http ffmpeg org download html 在下面选择版本 2 解压并创建生成目录 tar xvf ffmpeg snapshot tar bz
  • 单独编译使用WebRTC的音频处理模块

    单独编译使用WebRTC的音频处理模块 2016年12月08日 14 26 58 starRTC免费IM直播会议一对一视频 阅读数 8360 版权声明 starRTC免费im直播会议一对一视频 by elesos com starRTC c
  • Java中AWT、Swing与SWT三大GUI技术的原理与效率差异

    转自 http blog csdn net widegoose article details 333908 MineHe原创 看了一下对Java GUI讨论的帖子 所以写了一篇文章来阐述一下各种GUI技术的优劣 Java世界中 目前最知名
  • 黑马程序员Javaweb学习笔记02【request和response】

    该博客主要记录在学习黑马程序员Javaweb过程的一些笔记 方便复习以及加强记忆 系列文章 JavaWeb学习笔记01 BS架构 Maven Tomcat Servlet JavaWeb学习笔记02 request和response Jav
  • 模型训练——Loss函数 归纳汇总

    上一篇文章 语音降噪模型归纳汇总 很意外地收到了点赞收藏和关注 如此的反馈给了我极大的鼓舞 这里就再梳理了一下loss函数相关的知识 以求方便能作为一份工具性质的文章展现出来 能力一般 水平有限 欢迎大家指正 干货分享 欢迎收藏点赞加关注
  • (ESP32学习6)双核CPU的调用

    本来之前从来没有用过双核做东西 但是突然意识到他好像是双核的 所以找了一些资料更第一篇双核的调用 还是挺有趣的 博文会持续更FreeRTOS与双核相关内容 这一章先做一件最简单的事情 在两个核上创建简单任务让他们跑起来 先看代码再讲解 in
  • flink-cdc,clickhouse写入,多路输出

    1 场景 kafka日志数据从kafka读取 1 关联字典表 完善日志数据 2 判断日志内容级别 多路输出 低级 入clickhouse 高级 入clickhouse的同时推送到kafka供2次数据流程处理 2 实现 package com
  • 媒资知识图谱系统

    http wenku baidu com link url xEjnrOeeVaqCc5JNZfuFGewAFKWbPjZDI3FzopmFuDrxYIfXkU3fxaXnPDpI2 6 kvcbnwV 8irUddAmk2JpkZlD2B
  • 太赫兹技术的应用前景

    从振奋全国的神舟五号载人飞船开始 中国的航空进入了发展的快车道 有好奇的朋友问了 天上这么多的卫星 它们之间是怎么 交流 的 在太空中 两颗卫星在地球轨道上 运用传统卫星技术传数据需要一段时间才能完成传送 但太赫兹技术的出现 让卫星们可以不
  • vue3 Element UI使用自定义内容

    这里以Vue3版本的Element UI 举例 这是一个通知组件 通知的内容我们可以通过message参数来控制 例如
  • java解析json获取天气预报城市代码_利用json获取天气信息

    天气预报信息获取是利用json获取的 网上有非常多资源 源码 因为上面涉及到非常多天气信息 包含湿度 出行建议等 以及加入了全部城市代码的资源包 为了练手了解json的原理 我仅获取诚笃城市的最高温 最低温 城市名字 我的布局是通过一个bu
  • vue-cli3+ant-design-vue+typescript 注意事项

    项目参考vue cli3 web init ant design配置部分 1 实现ant disign vue的按需加载方案 1 引入所有的组件 然后加载到vue上面 components ant 2 对Ant Design Vue进行文件
  • unique_ptr的使用和陷阱

    转自 https blog csdn net qq 33266987 article details 78784286 unique ptr的使用 分配内存 与shared ptr不同 unique ptr没有定义类似make shared
  • JavaScript基础Day06:内置对象

    JavaScript基础Day06 内置对象 文章目录 JavaScript基础Day06 内置对象 如何学习一个方法 一 Math对象 二 Date对象 三 String对象 四 Array对象 五 基本包装类型 JavaScript中的
  • 【Docker】docker设置固定ip地址

    1 美图 2 概述 docker设置固定ip地址 Docker安装后 默认会创建下面三种网络类型 docker network ls NETWORK ID NAME DRIVER SCOPE 9781b1f585ae bridge brid
  • vue设置页面滚动高度_vue中获取滚动高度或指定滚动到某位置

    1 点击某个标签 滚动到某个具体位置 switchHeight num this selectNum num if num 0 document getElementById identifer one scrollIntoView els