[vue] 页面滚动到指定位置 scrollIntoView

已于 2023-10-26 17:05:52 修改
阅读量1.3k 收藏
点赞数
分类专栏： # vue 文章标签： javascript
于 2022-07-05 09:16:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_14993591/article/details/125612869
版权 
if (document.querySelector('.selectItem')) {
 	document.querySelector('.selectItem').scrollIntoView({ block: 'center' });
}

在这里插入图片描述

vue 跳转到页面指定标签 scrollIntoView 锚点滚动
weixin_45888412的博客
04-28 717
scrollIntoView 锚点滚动 <div> <div id="anchor"></div> <div @click="goToAnchor"></div> </div> <script> export default{ methods:{ goToAnchor(){ setTimeout(()=>{ document.querySelector("#anchor").scrol
div滚动到指定位置 vue_Vue列表实现滚动到指定位置样式改变
weixin_39940901的博客
12-22 1753
这个需求大概是这样子：我做的一个聊天Demo，在搜索框搜索用户，可以滚动到指定的用户。然后成选中状态。这是目前状态，我搜索南宫仆射 ，想要下面的用户列表直接滚动到南宫仆射并改变CSS样式。查询之后是这个子：嗯，我的思路：在搜索框搜索到用户之后会返回一个用户对象，之后会调用列表的点击事件，改变CSS样式及做一些聊天的逻辑。然后需要获取到列表对应的id值，直接使用 document.getEl...
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
10-17
主要介绍了基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue滚动到指定位置
qq_43610311的博客
11-14 884
前端滚动到指定位置
Vue2实现主内容滚动到指定位置时，侧边导航栏也跟随选中变化
最新发布
Mr.小灰狼_随笔
09-25 589
Vue2实现主内容滚动到指定位置时，侧边导航栏也跟随选中变化 需求背景： PC端项目需要实现一个有侧边导航栏，可点击跳转至对应内容区域，类似锚点导航， 同时主内容区域上下滚动时，可实现左侧导航栏选中样式能实时跟随变动的效果。
vue点击滚动到指定位置
jenesBangBang的博客
04-06 2186
offsetTop：元素的上边框与父元素的上边框的绝对距离。scrollTop：某个可滑动区块向下滚动的距离。
Vue进入页面将元素滚动到指定区域
weixin_51351053的博客
04-03 649
第二部 在mounted 生命周期种 获取元素调用scrollIntoView()方法元素显现出来。第一步 通过ref绑定需要显现的元素。
vue控制滚动条滑到某个位置
m0_55315930的博客
09-08 1万+
设置当前滑动到的距离，window.scrollTop(x,y) 传俩个值。 computed和watch之间的区别：
Vue列表如何实现滚动到指定位置样式改变效果
10-15
在使用Vue.js框架开发Web应用时，经常需要实现列表滚动到指定位置并改变对应列表项样式的功能，特别是在聊天、通讯录、文档目录等场景下。本文将详细介绍如何在Vue项目中实现滚动到指定位置并改变样式的效果。 首先...
Vue中滚动页面回到指定位置
SANJIN0527_的博客
08-05 1268
方法1： // 可以用来获取top值 // 可以不用加单位，这样写的话就是让滚动到什么位置 document.documentElement.scrollTop = 300 方法2： //先获取目标位置距离 mounted() { this.$nextTick(() => { setTimeout(() => { let targetbox= document.getElementById('box'); //在data中定义 t
移动端页面滚动到指定位置，兼容安卓ios主流浏览器，scrollIntoView方法的兼容性问题
weixin_43402720的博客
02-28 4397
移动端页面滚动到指定位置，兼容安卓ios主流浏览器，scrollIntoView方法的兼容性问题
Vue滚动到指定位置的多种方式
热门推荐
qsya的博客
07-13 4万+
需求： 当容器有滚动条时，有时需要将指定的内容自动滚动到可视区域。 方法一：锚点 锚点通过在元素上设置id，然后用a标签的href="#id"属性跳转到指定位置。 也可以通过js中 window.location.hash= ‘#id’ 或 window.location.href = ‘#id’ 来跳转。 //dom <a href="#li50">跳到50</a> <ul class="ul" id="ul"> <li v-for
vue 两步实现点击导航栏，滚动页面到指定位置的功能
前端小白的学习分享小世界
03-24 8430
实现在页面不同位置点击左侧导航栏，滚动页面到对应板块（指定位置）的功能，并可以自定义滚动操作的速度和距离。
vue滚动到指定元素位置
yesxcv的博客
09-30 238
document.getElementById("20201221007").scrollIntoView({ block: "center" });
vue 滚动条滚动到指定位置（非平滑滚动）
Lei_Xue的博客
10-13 1967
方法1：scrollTop 滚动到某位置 document. documentElement. scrollTop = 380;// 直接跳转到380的高度不需要加单位 方法2：scrollTo，scrollBy，scroll滚动到某位置 //第一个坑,ref绑定的元素不能是display： // 第二要力口上this .nextTtch this.$nextTick(() => { this.$refs.DOM.scrollTo(0,380); )) 方法3：scrollInt
vue 点击滑动到页面指定位置（点击下滑滚动）的功能
蓝胖子的博客
11-07 4061
vue 点击滑动到页面指定位置（点击下滑滚动）的功能
基于vue，如何实现滚动条滚动到指定位置，对应位置数字进行tween特效
weixin_33919950的博客
07-17 1万+
实现目标 浏览各大云平台，发现一个页面特效使用较为频繁，以“百度云”为例（https://cloud.baidu.com/），进入百度云后，当滚动条滚动至“更可靠的数据支持”模块时，页面数据将会开始滚动式增长特效。下面将会介绍我的解决方案，希望有同行更好的解决方案大家一起交流。 解决思路 主要的解决要点如下： 如何实现数字动画的效果 如...
VUE 滚动到指定区域scrollIntoView
CC酱写前端的博客
05-15 403
背景：当前 VUE 页面数据量很大，右侧出现滚动条, 进入该页面，页面定位到指定区域；项目要求： 进入页面，定位到指定行（红色标记）
vue实现点击按钮滚动页面到指定位置
09-03
在Vue中实现点击按钮滚动页面到指定位置，可以通过以下步骤实现： 1. 首先，在你的Vue组件中，给按钮绑定一个点击事件。可以使用`@click`指令或者`v-on:click`来实现。例如： ```html 滚动到指定位置 ``` 2. 在Vue...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值