vue中出现横向滚动条，默认滑动到最右侧进行内容展示

1.html<divref="scrollRef" class="box"></div>2.css.box{width: 100%;overflow-x: scroll;overflow-y: hidden;&::-webkit-scrollbar {display: none;}}3.js//获取完数据后，执行let

s先生的d小姐

6072人浏览 · 2021-09-09 08:58:45

s先生的d小姐 · 2021-09-09 08:58:45 发布

1.html

<div  ref="scrollRef" class="box">
 <!-- 由内容撑起滚动条 -->
</div>

2.css

.box{
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    &::-webkit-scrollbar {
      display: none;
    }
}

3.js

//获取完数据后，执行
//判断内容小于一屏时：
//let width = this.$refs.scrollRef.clientWidth;
//判断内容超过一屏时：
let width = this.$refs.scrollRef.scrollWidth;
this.$refs.scrollRef.scrollTo(width,0)；

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^