vue中设置滚动条方式

目录
  • vue设置滚动条
    • vue如何在div中设置滚动条呢？
  • 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
    }
}

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

赞 (0)

相关推荐

  • vue实现滚动条始终悬浮在页面最下方

    vue实现滚动条始终悬浮在页面最下方

    本文实例为大家分享了vue实现滚动条始终悬浮在页面最下方的具体代码,供大家参考,具体内容如下 需求 表格宽高都超出浏览器显示大小,横向滚动条需要始终浮在最下方便于滚动展示数据 思路 在表格下方添加一个滚动条容器,并且采用position: fixed定位始终浮在页面下方.在通过滚动事件绑定该容器与表格的横向滚动同步.在表格内容小于浏览器显示高度时,只展示表格滚动条. 实现 <div class="tab-table" id="tabTable" @scroll

  • Vue中使用vue2-perfect-scrollbar制作滚动条

    Vue中使用vue2-perfect-scrollbar制作滚动条

    官方地址:https://github.com/mercs600/vue2-perfect-scrollbar 下载: cnpm i -S vue2-perfect-scrollbar main.js中引用: import PerfectScrollbar from 'vue2-perfect-scrollbar' import 'vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.css' Vue.use(PerfectScrollbar) 使

  • vue实现一个滚动条样式

    vue实现一个滚动条样式

    起初是想修改浏览器滚动条样式来达到效果 但是查阅了资料 浏览器滚动条不能修改宽度与位置 没办法只能自己写 首先是滚动条样式 <div class="scrollBar" v-if="roleList.length > 5"> <div class="box" @mousedown="move" v-bind:style="{ width: activewidth + 'px' }"

  • vue中el-table两个表尾合计行联动同步滚动条实例代码

    vue中el-table两个表尾合计行联动同步滚动条实例代码

    目录 问题描述 效果图 思路 完整代码 总结 问题描述 最近产品提出一个需求,说是做表格呈现统计数据,不过数据源是来自两个地方的,所以需要做两个表格去呈现数据,同时在表格最后统计数据. 效果图 我们先看一下效果图 思路 获取对应的两个表格设置滚动条的dom,并通过Element.scrollLeft去设置滚动的距离 官方文档:developer.mozilla.org/zh-CN/docs/… 滚动容器(审查元素即可得知): 完整代码 自己演示的话,直接复制粘贴即可,代码中包含注释 <templ

  • vue实现web滚动条分页

    vue实现web滚动条分页

    本文实例为大家分享了vue web滚动条分页的具体代码,供大家参考,具体内容如下 1.在你的帮助类里面新建一个slidePagination.js文件 2.将下面的代码复制进去 import Vue from 'vue' // 聚焦指令 // 注册一个全局自定义指令 `v-focus` // v-focus Vue.directive('focus', {     // 当被绑定的元素插入到 DOM 中时--     inserted: function (el) {         // 聚焦

  • vue修改滚动条样式的方法

    vue修改滚动条样式的方法

    目录 首先要知道,修改滚动条样式,利用伪元素-webkit-scrollbar. 注意, ::-webkit-scrollbar仅仅支持WebKit的浏览器(例如谷歌Chrome.苹果Safari). 其次还需要了解滚动条的一些组成: ::-webkit-scrollbar 滚动条整体部分,可以设置宽度等 ::-webkit-scrollbar-thumb 滚动条里面的滑块 ::-webkit-scrollbar-button 滚动条轨道两端的按钮,允许通过点击以微调滑块的位置 ::-webki

  • vue中设置滚动条方式

    目录 vue设置滚动条 vue如何在div中设置滚动条呢? vue控制滚动条 vue设置滚动条 vue如何在div中设置滚动条呢? 首先需要写一下css样式 <div     :style="{'max-height': this.timeLineHeight + 'px' }"     style="overflow-y:scroll;"  >              </div> 在这个div中,放的是你写的前端代码.它是可以滚动的.

  • Vue中设置登录验证拦截功能的思路详解

    目录 一.解决思路 二.让浏览器存储服务器返回的token 三.在请求中设置访问权限 四.封装登录验证 Hello,你好呀,我是灰小猿,一个超会写bug的程序猿! 今天在做vue和springboot交互的一个项目的时候,想要基于前端实现一些只有登录验证之后才能访问某些页面的操作,所以在这里总结一下实现该功能的一个解决方案, 首先说一下我是如何判断是否已经登录的, 一.解决思路 由于在我的springboot后台采用的shiro+Jwt安全框架,所以会在登录之后反馈给前端一个token,并且前端

  • vue中设置、获取、删除cookie的方法

    1.在src目录下的access下新建一个cookie.js, 内容如下: export function setCookie(c_name,value,expire) { var date=new Date() date.setSeconds(date.getSeconds()+expire) document.cookie=c_name+ "="+escape(value)+"; expires="+date.toGMTString() //console.lo

  • vue中设置height:100%无效的问题及解决方法

    在vue.js中写新的components的时候,如果在新页面中的模板中设置height:100%的时候一直无效. App.vue文件 <template> <div id="app"> <router-view/> </div> </template> <script> export default { name: 'App' } </script> <style> #app { font

  • vue中改变滚动条样式的方法

    写在前面: 我是 扬帆向海,这个昵称来源于我的名字以及女朋友的名字.我热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的. 这博客是对自己学习的一点点总结及记录,如果您对 Java.算法 感兴趣,可以关注我的动态,我们一起学习. 用知识改变命运,让我们的家人过上更好的生活. 今天在自己开发的一个项目中,需求是让浏览器的滚动轴变细.想了好长时间才完成,在目前的测试中,滚动条在IE浏览器中不支持. scrollbar.css @charset "utf-8"; ::-webkit-s

  • vue中设置echarts宽度自适应的代码步骤

    vue中设置echarts宽度自适应的代码步骤

    目录 问题描述 无自适应效果图 有自适应效果图 代码步骤 问题描述 我们使用vue做项目的时候,常常需要做到echarts图表的自适应,一般是根据页面的宽度做对应的适应.本文记录一下设置echarts图表的自适应的步骤.我们先看一下没有做echarts自适应的效果 无自适应效果图 我们发现echarts图的宽度并没有随着页面宽度的变化而变化 有自适应效果图 很显然,这个才是我们想要的效果 代码步骤 echart图表本身提供了一个resize的函数,我们只需要监听页面的resize变化以后,去执行

  • vue中异步数据获取方式(确保数据被获取)

    vue中异步数据获取方式(确保数据被获取)

    目录 vue中异步数据获取 1.获取异步数据,通过async/await限制 2.将一个方法的返回值 vue处理数据(同步,异步)问题简单记录 情况介绍 最终解决方法:new Promise() vue中异步数据获取 1.获取异步数据,通过async/await限制 import { fetchList } from '@/api/article' //在created中即开始获取 created() {     this.getList() } methods:{     async getL

  • dataV大屏在vue中的使用方式

    dataV大屏在vue中的使用方式

    目录 前言 一.dataV可以实现什么效果? 二.使用步骤 1.安装依赖 2.引入 3.使用 三.效果 前言 随着信息化的发展,大屏展示的需求越来越多,使用e-charts一个一个的做配置太麻烦,于是找到了封装好的dataV,直接拿来用就可以实现酷炫的大屏效果. (画外音:部门接了几个搞大屏的项目,技术总监让研究一下大屏项目通用性,然后我研究了一下dataV)附上官方API链接 一.dataV可以实现什么效果? 答:各种图表大屏效果.(以下图是从dataV可视化官网截出来的,此文章不讲dataV

  • vue中使用el-dropdown方式

    vue中使用el-dropdown方式

    目录 vue 使用el-dropdown vue el-dropdown点击事件 vue 使用el-dropdown 点击[更多]弹出如下选项 使用el-dropdown <el-dropdown @command=" (command) => { handleCommand(command, scope.$index, scope.row); } " > <el-link type="primary" :underline="fa

  • 详解Vue中组件传值的多重实现方式

    vue中组件传值方式整理 1.我们最熟悉的父子组件传值 父->子 props 子->父 $emit 这些我们最常用的就不说了,如果有不理解的,俺这儿有篇不错的文章,链接奉上~ https://www.cnblogs.com/LoveAndPeace/p/7273648.html 2.兄弟组件或无关系组件之间的传值 我们最常用的方式采用一个第三方变量 俗称eventbus 通过其中一个$emit发另一个$on接收的方式 实现组件传值 main.js中挂载一下 在其中一个页面$emit 另一个页面

随机推荐