vue中设置滚动条方式
更新时间：2022年08月11日 14:45:51 作者：努力尝试！
这篇文章主要介绍了在vue中设置滚动条的方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
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中直接操作DOM元素，就必须用ref属性进行注册
<div @click = 'roll(1)'>向左移动</div> <div class='nav' ref="nav"></div> <div @click = 'roll(2)'>向右移动</div>
.nav{
overflow- (x,y) = hidden
/*宽高啥的。。。。。
}x或y轴做隐藏
roll(index){
if(index==1){
//滚动的数值 或者 +- = 值 或者死的数值 就是相应位置
//还有相应的 scrollTop 方法
this.$refs.nav.scrollLeft += 50
}else{
this.$refs.nav.scrollLeft -= 50
}
}以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
defineProps是Vue3中的一种新的组件数据传递方式,可以用于在子组件中定义接收哪些父组件的props,这篇文章给大家介绍vue3中defineProps及使用方法详解,感兴趣的朋友跟随小编一起看看吧2024-03-03
这篇文章主要介绍了Vue网页html转换PDF（最低兼容ie10）的思路详解,实现此功能需要引入两个插件，需要的朋友可以参考下2017-08-08
解决Vue运行项目报错proxy error: could not proxy request
这篇文章主要给大家介绍了关于如何解决Vue运行项目报错proxy error:could not proxy request的相关资料,Proxy Error指的是代理服务器无法正确处理请求的错误,需要的朋友可以参考下2023-08-08
这篇文章主要为大家介绍了Vue cli3 chainWepack使用方法示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-11-11
这篇文章主要给大家分享了 vue中install方法介绍，vue提供install可供我们开发新的插件及全局注册组件等，感兴趣的小伙伴请和小编一起进入文章了解具体内容吧2021-11-11
vite打包去除console.log和debugge的方法实践
本文主要介绍了vite打包去除console.log和debugge的方法实践,vite 已经将这个功能内置了,所以我们只需要修改配置文件,下面就来介绍一下如何修改2023-12-12
这篇文章主要介绍了Vue 中使用lodash对事件进行防抖和节流操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了Vue的方法和属性案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-07-07
这篇文章主要给大家介绍了关于treeSelect树组件设置父节点禁用的相关资料,文中通过图文以及示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-12-12
Vue的Eslint配置文件eslintrc.js说明与规则介绍
最近在跟着视频敲项目时，代码提示出现很多奇奇怪怪的错误提示，百度了一下是eslintrc.js文件没有配置相关命令，ESlint的语法检测真的令人抓狂，现在总结一下这些命令的解释2020-02-02
最新评论