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: "",
    }
  }

这样就可以了！

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

您可能感兴趣的文章:

vue3中的createApp分析
这篇文章主要介绍了vue3中的createApp分析,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-04-04
源码分析Vue3响应式核心之effect
这篇文章主要为大家详细介绍了Vue3响应式核心之effect的相关知识，文中的示例代码讲解详细，对我们学习Vue3有一定的帮助，需要的可以参考一下
2023-04-04
vue查找指令和模板思路详解
这篇文章主要介绍了vue查找指令和模板,基本思路是需要判断当前遍历到的节点是一个元素还是一个文本，随着思路的展开我们就来实现这个功能，需要的朋友可以参考下
2023-10-10
Vue实现动态显示textarea剩余字数
这篇文章主要为大家详细介绍了Vue实现动态显示textarea剩余文字数量，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
Vue加载读取本地txt/json等文件的实现方式
这篇文章主要介绍了Vue加载读取本地txt/json等文件的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vue router导航守卫（router.beforeEach()）的使用详解
导航守卫主要用来通过跳转或取消的方式守卫导航。这篇文章主要介绍了vue-router导航守卫（router.beforeEach()）的使用,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-04-04
vue props传值失败输出undefined的解决方法
今天小编就为大家分享一篇vue props传值失败输出undefined的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue实现el-select 触底分页+远程搜索的示例
有的时候数据量比较大,比如几千甚至上万条的时候,如果直接赋值,整个页面的 dom 会被撑爆,本文主要介绍了vue实现el-select 触底分页+远程搜索的示例,具有一定的参考价值,感兴趣的可以了解一下
2023-12-12
vue实现直播间点赞飘心效果的示例代码
这篇文章主要介绍了vue实现直播间点赞飘心效果的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-09-09
vue项目如何使用$router.go(-1)返回时刷新原来的界面
这篇文章主要介绍了vue项目如何使用$router.go(-1)返回时刷新原来的界面问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09