vue实现滚动条到顶部或者到指定位置

更新时间：2022年08月13日 09:07:32 作者：Hero_rong

这篇文章主要介绍了vue实现滚动条到顶部或者到指定位置，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue滚动条到顶部或到指定位置

首先在 html 里面给你要滚动的元素设置属性 ref='box' 这就相当于是DOM操作了，

然后根据属性名找到则个元素就可以操作啦

vue设置滚动条

vue如何在div中设置滚动条呢？

首先需要写一下css样式

<div
    :style="{'max-height': this.timeLineHeight + 'px' }"
    style="overflow-y:scroll;"
 >            
</div>

在这个div中，放的是你写的前端代码。它是可以滚动的。

在mounted中改变最大高度的大小。这个减210，它减的是我标头的高度，你的具体高度需要根据实际情况来减。

mounted() {
    this.timeLineHeight = document.documentElement.clientHeight - 210;
    window.onresize = () => {
      this.timeLineHeight = document.documentElement.clientHeight - 210;
    };
  },

在data中声明一下属性

 data() {
    return {
      timeLineHeight: "",
    }
  }

这样就可以了！

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue基本使用之对象提供的属性功能
这篇文章主要介绍了Vue基本使用之对象提供的属性功能实例详解，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下
2019-04-04
15分钟上手vue3.0(小结)
这篇文章主要介绍了15分钟上手vue3.0，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-05-05
vue3实现在新标签中打开指定网址的方法
我希望点击查看按钮的时候,能够在新的标签页面打开这个文件的地址进行预览,该如何实现呢,下面小编给大家带来了基于vue3实现在新标签中打开指定的网址,感兴趣的朋友跟随小编一起看看吧
2024-07-07
vue使用动态添加路由(router.addRoutes)加载权限侧边栏的方式
这篇文章主要介绍了vue使用动态添加路由(router.addRoutes)加载权限侧边栏的方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-06-06
关于Vue的URL转跳与参数传递方式
这篇文章主要介绍了关于Vue的URL转跳与参数传递方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
Vue中如何进行数据响应式更新
Vue是一款流行的JavaScript框架，它提供了数据响应式更新的能力，可以让我们轻松地更新数据，并自动更新视图，本文将介绍Vue中如何进行数据响应式更新，包括使用Vue的响应式系统、使用计算属性和使用Vue的watcher,需要的朋友可以参考下
2023-06-06
vue3.0 上手体验
vue3.0 beta 版本已经发布有一段时间了，今天这篇文章就带大家体验一下，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
vue-cli3环境变量与分环境打包的方法示例
这篇文章主要介绍了vue-cli3环境变量与分环境打包的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-02-02
解决vue $http的get和post请求跨域问题
这篇文章主要介绍了解决vue $http的get和post请求跨域问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2021-06-06
浅析vue3项目中自定义指令的运用
自定义指令是一种在Vue应用程序中扩展HTML标签的能力，通过自定义指令，我们可以直接在模板中使用指令名，下面我们就来看看项目中具体如何使用自定义指令的吧
2023-08-08