vue滚动条（vue滚动条事件）

本篇文章给大家谈谈vue滚动条，以及vue滚动条事件对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、Vue 设置内容滚动 并且隐藏滚动条
• 2、vue的滚动条插件vue-scroll
• 3、vue滚动条消失
• 4、el-scrollbar vue 滚动条
• 5、vue图片水平滚动,滚动条高亮滚动位置
• 6、vue 滚动条选中元素自动滚动到可视区域里居中显示

Vue 设置内容滚动 并且隐藏滚动条

设置子视图超出父试图坦唤型之后滚动

overflow-x: scroll;设置滚链稿动

flex-direction: row;横向让猜布局

::-webkit-scrollbar {

width: 0;

}设置滚动条为0

flex-shrink: 0;禁止压缩

[img]

vue的滚动条插件vue-scroll

最近在开发Vue项目时，需要实现宴缺世一个页面的局部滚动条功能。以前实现此类功能都是使用的iframe原生的滚动条功能，保证内容只在div块内滚动，别的地方不影响。

据尝试，发现Iview等组件库都没有符合这种情况的组件，于是查找了其他组件，最终选用晌肢了vue-scroll插件。

vuescroll 是一个基于 vue.js 2.X 虚拟滚动条， 它支持定制滚扮携动条的样式，检测内容尺寸变化、能够使内容分页、支持上拉-刷新，下推加载等诸多特性。

(1)拥有原生滚动条的滚动行为

(2)可以定制滚动条的样式(包括颜色、尺寸、位置、透明度、是否保持显示等)

(3)在模式之间自由切换

(4)能够通过设置滚动动画来平滑地滚动

(5)拉取刷新和推动加载

(6)支持分页模式(每次滑动整个页面)

(7)支持快照模式(每次滑动滚动一个用户定义的距离)

(8)可以检测内容尺寸发生变化

在components中再注册一下

这两种引入方式都可以，引入后用vuescroll包裹需要滚动的部分

在data中写明需要修改的配置项

vue滚动条消失

这个情况的出现方式很多，我个人写这个是因为刷新页面后，本来衡宏有的滚动条消失了。这个滚动条是我内置设置好页面高度的，正常第一次加载是这样的

超过高度overflow：auto,按道理说应该会有滚动条，可实际情况却没有显示。

这个原因是因为：页面跳转乱稿后，body被加上了一咐陪册个style="overflow: hidden;这是一个bug！！！

解决办法：

第一种：为body设置属性overflow: auto !important;

第二种：用路由设置属性

router.afterEach((to, from, next) = { document.querySelector("body").setAttribute("style", "overflow: auto !important;")});

el-scrollbar vue 滚动条

div class="box"

            el-scrollbar

              y-table :data="data"

            :field="field"

            :buttonList="buttonList"

            @delAll="delAll"

            @add="add"

            @del="del"

            @edit="edit"

            v-on="$listeners"

            :openSearch="false"

              /y-table

            /芹陆此el-scrollbar

 悉改   /div嫌迅

.box {

        width: 100%;

        height: 100%;

    }

.el-scrollbar {

        height: 100%;

        width: 100%;

    }

.el-scrollbar__wrap{

  overflow-x: auto;

  height: calc(100% + 20px); //多出来的20px是横向滚动条默认的样式

}

.el-scrollbar .el-scrollbar__wrap .el-scrollbar__view{

  white-space: nowrap;

  display: inline-block;

}

vue图片水平滚动,滚动条高亮滚动位置

Vue图片水平滚动滚动条高亮滚动位置可以使用Vue的v-scroll指令来实现。v-scroll指令可以接受一个参数，用于指定滚动条的高亮位置。例如：div v-scroll:index="index"，其中index参数用于指定滚动条高亮位置，可以是一个数字或胡唤者一个字符串。Vue图片水平滚动滚动条高亮滚动位置可以使用Vue的v-scroll指令来实现。v-scroll指令可以接受一个参数，用于指定滚动条的高亮位置。例如：div v-scroll:index="index"，其中index参数用于指定滚动条高亮位置，可以是一春做毕个数字或者扒芹一个字符串。

vue 滚动条选中元素自动滚动到可视区域里居中显示

模拟vant的Tab标签页的标签含拍和滚动效果

效果：选中元素，在滚动条的可视区域里面自动居中，贺搭头尾两端不用居中

vant效果：

如果这篇文章对你有用,请给我点个赞,让我谈盯更加有动力写下去,谢谢

关于vue滚动条和vue滚动条事件的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。