vue 滚动条平滑滚动到某个位置

最新推荐文章于 2024-04-23 15:11:05 发布
最新推荐文章于 2024-04-23 15:11:05 发布
阅读量1.8k 收藏 1
点赞数
文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29715077/article/details/124445577
版权 
window.scrollTo({
    //滚动到元素位置
    //top: this.$refs[元素].offsetTop,//offsetTop 相对于offsetparent 定位,当有定位时，不准确。
    top: this.$refs[元素].getBoundingClientRect().top + window.scrollY,//推荐使用，getBoundingClientRect 相对于当前视口的位置
    //top: 400//滚动到指定距离
    //top: 0,//滚动到顶部
    //top: document.documentElement.scrollHeight,//滚动到底部
    behavior: "smooth" // 平滑滚动
  });

左又
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
vue 网页滚动到指定位置显示动画效果
sinat_41657240的博客
04-12 6401
网页视觉差效果，滚动动画
滚动页面到指定位置动画展示-Vue自定义命令-IntersectionObserver-animate.css
m0_71362881的博客
10-17 1114
滚动页面到指定位置动画展示-Vue自定义命令-IntersectionObserver-animate.css
vue使用scroll滚动，平滑滚动到顶部 @scroll=“scrollBottom“
weixin_45859470的博客
12-13 682
然后监听或者点击数据的时候，数据变化 让盒子滚动到顶部。如果想要平滑滚动，需要给添加事件盒子的css样式添加。给添加滚动事件的盒子添加ref获取盒子。
在Vue页面中实现平滑滚动功能
weixin_48018877的博客
12-02 1300
这是一个实现平滑滚动的函数，可以让页面在滚动到指定位置时产生缓动效果。该函数依赖于Math.easeInOutQuad函数和requestAnimFrame函数，其中Math.easeInOutQuad函数用于计算当前滚动位置的值（根据时间、起始值、变化量和持续时间），requestAnimFrame函数用于实现动画效果。
Vue滚动到指定位置的多种方式
wnk1997的博客
03-18 737
不知道为啥，我试了下，只有scrollIntoView生效，并且虽然是滚动了，但是滚动的位置不对，其他的都没生效。原文：https://blog.csdn.net/qq_34241004/article/details/118692837。
vue实现页面滑动至指定位置
个人博客 https://pnkx.top
03-17 3071
在Vue中，有三种方式可以实现页面滑动至指定位置 方法1： //先获取目标位置距离 mounted() { this.$nextTick(() => { setTimeout(() => { let targetbox= document.getElementById('targetbox'); this.target= t...
vue滚动到指定位置
潇蓝诺依的博客
09-14 3048
vue 滚动到指定位置 <div class="box1"> <div v-for="i in 50" :key="'a' + i" :ref="'a' + i">{{ i }}</div> </div> ⚠️ refs 当与v-for使用时，要加[0] 1.Element.scrollIntoView MDN scrollIntoView scroll(pos) { // 不受定位影响 ，但是水平及垂直方向无法自定义数值，只能 "start"
Vue：滚动页面到指定位置实现（避坑）
热门推荐
KWMax
02-25 3万+
在Vue中，有三种方式可以实现H5页面滑动至指定位置 方法1： //先获取目标位置距离 mounted() { this.$nextTick(() => { setTimeout(() => { let targetbox= document.getElementById('targetbox'); this.target= targ...
vue 平滑回到顶部
qq_39882919的博客
01-22 1041
mounted() { window.addEventListener(“scroll”, this.handleScroll); }, backTop() { cancelAnimationFrame(this.timer) const self = this self.timer = requestAnimationFrame(function fn() { const oTop = document.body.scrollTop || document.documentElement.scrollTo
Vue3实现滚动加载动画效果
delete_you的博客
03-14 2984
引入wow.js以及animate.css两个动画库，实现滚动到指定位置自动播放动画的效果
jQuery和JavaScript和vue让子盒子滚动到父盒子的指定位置，包括设置scrollTop到指定位置的值为rem
weixin_44784401的博客
03-07 3016
jQuery和JavaScript和vue让子盒子滚动到父盒子的指定位置，包括设置scrollTop到指定位置的值为rem
Vue列表如何实现滚动到指定位置样式改变效果
10-15
主要介绍了Vue列表实现滚动到指定位置样式改变效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
Vue引入jquery实现平滑滚动到指定位置
10-18
主要介绍了Vue引入jquery实现平滑滚动到指定位置的效果，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
Vue实现渲染数据后控制滚动条位置(推荐)
10-15
主要介绍了Vue实现渲染数据后控制滚动条位置，本文通过图文并茂的形式给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
10-17
主要介绍了基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
scroll 元素滚动到指定位置(包含app和网页）
bai_shuang的博客
06-15 4871
VueScrollTo是一个基于Vue的平滑滚动插件，实现网页中元素点击后平滑滚动到目标位置的效果。在很多情况下，我们需要在网页中使用锚点链接，但是默认的锚点跳转方式可能会出现跳动或者瞬间跳转的情况，使用VueScrollTo可以避免这些问题。接下来将从以下几个方面详细介绍VueScrollTo的使用方法。
vue控制滚动条滑到某个位置
m0_55315930的博客
09-08 1万+
设置当前滑动到的距离，window.scrollTop(x,y) 传俩个值。 computed和watch之间的区别：
scrollTo 滚动到指定的位置
sinat_37897240的博客
11-16 143
顶部元素用 fixed 做了粘性定位后，希望滚动到该定位元素的下方。首先计算 lives 的高度，再计算 shop 距离顶部的距离。使用 window.scrollTo 滚动。
vue3 页面滚动到指定位置
最新发布
qq_44871531的博客
04-23 291
vue3 页面滚动到指定位置,类似游览器的ctrl+F的功能
vue 滚动条滚动到指定位置改变样式
09-06
使用Vue中的`refs`属性可以获取到指定DOM元素的引用，并通过改变元素的样式来实现滚动条滚动到指定位置改变样式的效果。 首先，在需要滚动的元素上添加`ref`属性，并设置一个名称，如`scrollDiv`。 ```html <template> <div class="container"> <div class="scroll-wrapper" ref="scrollDiv"> <!-- 内容 --> </div> </div> </template> ``` 然后，在Vue组件的`methods`属性中定义一个方法，该方法用于改变滚动条位置和样式。在这个方法内部，我们通过`this.$refs.scrollDiv`来获取到指定的滚动元素。 ```javascript <script> export default { methods: { scrollTo(position) { this.$refs.scrollDiv.scrollTop = position; // 根据需要设置其他样式 // this.$refs.scrollDiv.style.color = 'red'; } } } </script> ``` 接着，在需要触发滚动的事件处调用该方法。可以使用`@click`、`@scroll`等事件来触发滚动。 ```html <template> <div class="container"> <div class="scroll-wrapper" ref="scrollDiv" @click="scrollTo(100)"> <!-- 内容 --> </div> </div> </template> ``` 在上述代码中，点击滚动元素时会触发`scrollTo`方法，将滚动元素的滚动条位置滚动到100px的位置，并可以根据需要进一步设置其它样式。 以上就是一种使用Vue实现滚动条滚动到指定位置改变样式的方法。 （注意：以上代码只是简单示例，具体实现可能需要根据实际情况进行适当的调整。）

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值