vue项目页面滚动到特定元素的的四种方法

最新推荐文章于 2024-09-25 00:00:00 发布
最新推荐文章于 2024-09-25 00:00:00 发布
阅读量9.6k 收藏 13
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cjFrontEnd/article/details/99709971
版权

最近在做一个关于语音识别的项目, 涉及到语音消息的实时推送, 语音内容的识别与内容关联话术推荐, 做的时候需要实现一个识别出来的内容关联客户对话内容的功能, 简而言之就是实现一个点击跳转到在实时更新的对话框内与当前内容相关联的特定元素的功能, 实现的过程中用一个很巧妙的办法解决了, 这里记录一下.

方法一: 利用锚链接 / 直接改变hash值

说道页面内的跳转, 有过一段时间开发经验的同学想到的第一种方法应该就是这种,锚链接的使用方式也很简单, 如果想要跳转到id为targetBox 的 div

只需要加上window.location.hash = ''#targetBox" z或者加上如下点击链接就行:

<a href="#targetBox">点我就能跳转</a>

 但是使用此种方法也是有缺陷的, 因为它改变了页面的路由地址, 在vue的项目中,实现spa单页应用的原理就是通过修改hash值来改变加载内容, 一旦这样跳转, 页面路由就会出现问题,因此在vue项目中这种方式基本上无法使用.

 

方法二: 利用scrollTop

这种方式也是很常见的一种, 利用页面的高度差,跳转到特定位置, 如果高度差为100:

document.getElementById('targetBox').scrollTop = 100

由于项目当中的语音对话框是实时更新的,这种方法在当高度差实时发生变换的时候并不好用.

 

方法三: 通过让元素获得焦点

这个方法之前没有用过,其原理是通过让元素支持focus事件,让元素获取焦点,div正常情况下是无法像input元素一样获得焦点的，但是正如我们可以通过给div加上conteneditable属性让div元素变得可以编辑一样,在这里我们也可以通过给div元素加上tabindex = "0"的属性让元素可以获取焦点:

<div id="targetBox" tabindex = "0"></div>

document.getElementById("targetBox").focus();

这样实现跳转之后的元素会加上一个蓝色的选中边框,可通过设置outline:none;属性取消.

 

方法四: 利用scrollIntoView方法

此方法可以简单的通过获取元素就让当前的元素滚动到浏览器窗口的可视区域内:

<div id="targetBox" tabindex = "0"></div>

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

通过设置alignToTop参数来设置元素的显示位置, 如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐,如果为false，元素的底端将和其所在滚动区的可视区域的底端对齐.显然这种方式最是简单,推荐这种.

cjFrontEnd
关注
vue-scrollto, 添加侦听单击事件并滚动到元素的指令.zip
10-09
vue-scrollto, 添加侦听单击事件并滚动到元素的指令 scrollto 演示工具滚动到元素从不那么容易 ！这是给 vue 2.x对于 vue 1.x 使用 vue-scrollTo@1.0.1 ( 请注意大写字母)，但要记住旧版本依赖于 jquery 。在引擎盖下
Vue列表如何实现滚动到指定位置样式改变效果
10-15
主要介绍了Vue列表实现滚动到指定位置样式改变效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
vue项目中滚动到某元素位置
qq506930427的博客
12-10 1万+
1.使用a标签+#号 &lt;a href="#box1"&gt;我跳到box1&lt;/a&gt; &lt;div id="box2"&gt;&lt;/div&gt; 上面这一种的缺点是，url会发生改变，会在url最后面加上片段识别符#box2，这样就改变了URL的路径，这是我们不想看到的。因为再次刷新的时候回出现问题。当使用 vue-router回退时，发现需要回退很多次。 2.s...
Vue2实现主内容滚动到指定位置时，侧边导航栏也跟随选中变化
最新发布
Mr.小灰狼_随笔
09-25 575
Vue2实现主内容滚动到指定位置时，侧边导航栏也跟随选中变化 需求背景： PC端项目需要实现一个有侧边导航栏，可点击跳转至对应内容区域，类似锚点导航， 同时主内容区域上下滚动时，可实现左侧导航栏选中样式能实时跟随变动的效果。
Vue进入页面将元素滚动到指定区域
weixin_51351053的博客
04-03 637
第二部 在mounted 生命周期种 获取元素调用scrollIntoView()方法元素显现出来。第一步 通过ref绑定需要显现的元素。
Vue滚动到指定位置的多种方式
wnk1997的博客
03-18 2387
不知道为啥，我试了下，只有scrollIntoView生效，并且虽然是滚动了，但是滚动的位置不对，其他的都没生效。原文：https://blog.csdn.net/qq_34241004/article/details/118692837。
vue滚动到指定元素位置
yesxcv的博客
09-30 236
document.getElementById("20201221007").scrollIntoView({ block: "center" });
vue让元素滚动到指定位置
蓦然回首，那人却在，灯火阑珊处。
01-13 1298
vue让元素滚动到指定位置
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
10-15
这个方法对于创建导航菜单或长页面滚动到特定内容非常有用。通过调整`scrollTo`的参数，还可以实现更复杂的滚动效果，如横向滚动或自定义滚动速度。希望这个解释有助于理解和实现类似的功能。如果你在实际操作中遇到...
Vue获取页面元素的相对位置的方法示例
10-15
这意味着当页面滚动时，元素的位置会随着视口的变化而变化。 在给定的示例中，开发者想要获取元素相对于文档顶部的位置，以便在滚动时将其固定在头部。这时，单纯使用`getBoundingClientRect().top`可能无法满足...
vue 中滚动条始终定位在底部的方法
10-18
在使用Vue框架开发前端页面时，经常需要处理列表滚动以及保持滚动条在特定位置的需求。例如，在聊天应用、实时消息显示或者日志查看等场景中，使滚动条保持在视图的底部，以便用户始终看到最新的内容，是非常常见的...
vue中改变滚动条样式的方法
10-15
在Vue.js应用中，改变滚动条的样式通常涉及到两种主要的方法：一种是使用原生CSS样式，另一种是借助第三方库，如vuescroll。这两种方法都有其特点和适用场景，下面将详细介绍这两种方法。 **一、原生CSS样式** ...
解决Vue页面固定滚动位置的处理办法
08-30
本篇文章主要介绍了解决Vue固定滚动位置的处理办法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue-scrollto：添加指令以侦听单击事件并滚动到元素
02-06
Vue滚动 滚动到元素从未如此简单！ 这适用于vue 2.x和vue 3.x （自 ） 对于vue 1.x使用vue-scrollTo@1.0.1 （请注意大写vue-scrollTo@1.0.1 T），但请记住，旧版本取决于jquery 。 引擎盖下 vue-scrollto使用window.requestAnimationFrame来执行动画，从而提供最佳性能。 使用缓动（ Easy）完成了-经过良好测试的缓动微库。 它甚至知道用户何时中断，并且不会强制滚动而导致不良的UX。 正在安装 该软件包可在npm上获得。 如果您以前使用过此软件包，请确保您使用的软件包正确，因为它已从“
vue实现某元素吸顶或固定位置显示（监听滚动事件）
08-28
以上知识点详细解释了如何使用Vue实现元素在页面滚动时的吸顶效果，从基本的事件监听到动态控制样式的应用，再到对性能的考量，每一个步骤都是实现吸顶效果不可或缺的部分。这些内容对于前端开发人员来说非常实用，...
vue 点击滑动到页面指定位置（点击下滑滚动）的功能
蓝胖子的博客
11-07 4050
vue 点击滑动到页面指定位置（点击下滑滚动）的功能
Vue：滚动页面到指定位置实现（避坑）
热门推荐
KWMax
02-25 4万+
在Vue中，有三种方式可以实现H5页面滑动至指定位置 方法1： //先获取目标位置距离 mounted() { this.$nextTick(() => { setTimeout(() => { let targetbox= document.getElementById('targetbox'); this.target= targ...
vue滑动到指定位置
追梦小狂魔的博客
08-12 1051
想要滑动的东西加上id即可，后面的数字是毫秒。
vue点击跳转到指定页
03-28
在 Vue 中，可以通过 router 进行页面的跳转。具体步骤如下： 1. 安装 Vue Router： ``` npm install vue-router ``` 2. 在 main.js 中引入 Vue Router： ``` import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) ``` 3. 创建路由实例并配置路由： ``` const router = new VueRouter({ routes: [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: About } ] }) ``` 其中，`routes` 是一个数组，每个元素表示一个路由规则，包括路径 `path`、名称 `name` 和组件 `component`。 4. 在组件中使用 `router-link` 组件进行跳转： ``` <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> ``` `to` 属性指定跳转的路径。 5. 在组件中使用 `$router.push()` 方法进行编程式跳转： ``` this.$router.push('/') ``` 其中，参数为要跳转的路径。 完整代码示例： ``` // main.js import Vue from 'vue' import VueRouter from 'vue-router' import App from './App.vue' import Home from './components/Home.vue' import About from './components/About.vue' Vue.use(VueRouter) const router = new VueRouter({ routes: [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: About } ] }) new Vue({ router, render: h => h(App), }).$mount('#app') // App.vue <template> <div> <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> </div> </template> <script> export default { name: 'App' } </script> // Home.vue <template> <div> <h1>Home</h1> </div> </template> <script> export default { name: 'Home' } </script> // About.vue <template> <div> <h1>About</h1> </div> </template> <script> export default { name: 'About' } </script> ```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值