A free, fast, and reliable CDN for vue3-auto-scroll. a auth scroll component with vue3, support typescript
// 是否使用插件滚动方式,设为false后,会出现浏览器自带的滚动条,将不会按页滚动 // autoScrolling: true, // 设置每个section底部的padding,当我们要设置一个固定在底部的菜单、导航、元素等时使用 // paddingBottom: '0', // 滚动到某一屏的回调 // afterLoad: this.afterLoad // onLeave: this.onLeave...
import V3Scroll from './components/v3scroll' createApp(App).use(V3Scroll).mount('#app') 使用组件 使用<v3-scroll>包裹住内容块即可快速生成一个虚拟滚动条组件。 <!-- 自定义参数 --> <v3-scroll size="8" color="#09f" zIndex="2021"> 显示自定义内容! </v3-scroll> <!-- 事件处理 -->...
toRefs(state) }; }, }); .scroll { height: 270px; width: 500px; margin: 100px auto; overflow: hidden; } .scroll .item { display: flex; align-items: center; justify-content: space-between; padding: 3px 0; } 展示效果 JS版效果 CSS3版效果 编辑于 2024-07-04 20:43・IP 属...
v3scroll支持如下参数自定义配置。 props: {//是否显示原生滚动条native: Boolean,//是否自动隐藏滚动条autohide: Boolean,//滚动条尺寸size: { type: [Number, String],default: ''},//滚动条颜色color: String,//滚动条层级zIndex:null}, v3scroll组件模板 ...
组件配置 list 无缝滚动列表数据,组件内部使用列表长度。 type: Arrayrequired: true v-model 通过v-model控制动画滚动与停止,默认开始滚动 type: Boolean,default: true,required: false direction 控制滚动方向,可选值up,down,left,right type: String,default:...
scrollDirectionString指定滚动方向'vertical'(默认) 或'horizontal'. scrollOffsetNumber可以指定滚动位置 scrollToIndexNumber可以指定到滚动到哪个元素 scrollToAlignmentString结合scrollToIndex一起用, 用于控制滚动到的元素的对齐方式. 可选:'start','center','end'or'auto'. 使用'start'将对齐到容器的起始位置,'en...
overflow: auto; // 滚动条整体部分 &::-webkit-scrollbar { width: 6px; height: 6px; } // 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。 &::-webkit-scrollbar-button { display: none; } // 滚动条的轨道(里面装有Thumb) &::-webkit-scrollbar-track { ...
overflow: auto; border: 1px solid red; padding:010px; } 3.使用useScroll插件 首先安装@vueuse/core包 官网使用方法:useScroll npminstall@vueuse/core 组件里面使用方法如下: import { ref, computed } from'vue'import { useScroll } from'@vueuse/core'const content=ref() const { arrivedState }=...
autoHide 是否自动隐藏滚动条,仅当 trigger: 'hover' 时生效,true: hover且不滚动时自动隐藏,滚动时自动显示;false: hover时始终显示 boolean true delay 滚动条自动隐藏的延迟时间,单位 ms number 1000 horizontal 是否使用横向滚动 boolean false Methods 名称说明类型 scrollTo 滚动内容 (options: { left?: numbe...