首页 前端知识 vue简单实现滚动条

vue简单实现滚动条

2024-06-21 09:06:48 前端知识 前端哥 514 70 我要收藏

背景:产品提了一个需求在一个详情页,一个form表单元素太多了,需要滚动到最下面才能点击提交按钮,很不方便。他的方案是,加一个滚动条,这样可以直接拉到最下面。
优化:
1、支持滚动条,这样方便快速往下拉
2、点击提交按钮可以悬浮起来,这样随时都能修改完提交,不用拉到最底下。接下来就简单案例实现一下

直接用vue中的组件来实现这个小需求。

<!--
用来写测试案例
-->
<template>
<!-- 滚动条 -->
  <div class="white">
    <el-form ref="formRef" :model="data" label-width="70px" size="mini"
             id="selectForm"
    >
      <el-form-item label="标题:">
        <el-input v-model="data.album.title" placeholder="请输入标题" ></el-input>
      </el-form-item><el-form-item label="标题:">
      <el-input v-model="data.album.title" placeholder="请输入标题" ></el-input>
    </el-form-item><el-form-item label="标题:">
      <el-input v-model="data.album.title" placeholder="请输入标题" ></el-input>
    </el-form-item><el-form-item label="标题:">
      <el-input v-model="data.album.title" placeholder="请输入标题" ></el-input>
    </el-form-item><el-form-item label="标题:">
      <el-input v-model="data.album.title" placeholder="请输入标题" ></el-input>
    </el-form-item><el-form-item label="标题:">
      <el-input v-model="data.album.title" placeholder="请输入标题" ></el-input>
    </el-form-item><el-form-item label="标题:">
      <el-input v-model="data.album.title" placeholder="请输入标题" ></el-input>
    </el-form-item><el-form-item label="标题:">
      <el-input v-model="data.album.title" placeholder="请输入标题" ></el-input>
    </el-form-item><el-form-item label="标题:">
      <el-input v-model="data.album.title" placeholder="请输入标题" ></el-input>
    </el-form-item><el-form-item label="标题:">
      <el-input v-model="data.album.title" placeholder="请输入标题" ></el-input>
    </el-form-item><el-form-item label="标题:">
      <el-input v-model="data.album.title" placeholder="请输入标题" ></el-input>
    </el-form-item><el-form-item label="标题:">
      <el-input v-model="data.album.title" placeholder="请输入标题" ></el-input>
    </el-form-item><el-form-item label="标题:">
      <el-input v-model="data.album.title" placeholder="请输入标题" ></el-input>
    </el-form-item><el-form-item label="标题:">
      <el-input v-model="data.album.title" placeholder="请输入标题" ></el-input>
    </el-form-item><el-form-item label="标题:">
      <el-input v-model="data.album.title" placeholder="请输入标题" ></el-input>
    </el-form-item><el-form-item label="标题:">
      <el-input v-model="data.album.title" placeholder="请输入标题" ></el-input>
    </el-form-item><el-form-item label="标题:">
      <el-input v-model="data.album.title" placeholder="请输入标题" ></el-input>
    </el-form-item><el-form-item label="标题:">
      <el-input v-model="data.album.title" placeholder="请输入标题" ></el-input>
    </el-form-item><el-form-item label="标题:">
      <el-input v-model="data.album.title" placeholder="请输入标题" ></el-input>
    </el-form-item><el-form-item label="标题:">
      <el-input v-model="data.album.title" placeholder="请输入标题" ></el-input>
    </el-form-item><el-form-item label="标题:">
      <el-input v-model="data.album.title" placeholder="请输入标题" ></el-input>
    </el-form-item>
    </el-form>
    <div class="formSubmit">
      <el-button type="primary" >提交</el-button>
    </div>
  </div>

</template>

<script>
export default {
  name:'videoDirUploadList',
  data(){
    return{
      data:{
        album:{
        }
      },

    }
  },
  created() {
  },
  methods:{
  
  }

}
</script>

<style>
.white{
  background: #fff;
  width: 100%;
  padding: 10px;
  border-radius: 5px;

  height: calc(100vh - 51px);
  overflow-x: hidden;
  overflow-y: scroll;

}
.white::-webkit-scrollbar {
  width: 10px;
  /*滚动条宽度*/
  height: 5px
  /*滚动条高度*/
}
/*定义滚动条轨道 内阴影+圆角*/
.white::-webkit-scrollbar-track {
  /*滚动条的背景区域的内阴影*/
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0) inset;

  /*滚动条的背景区域的圆角*/
  opacity: 0;
  /*滚动条的背景颜色*/
  background-color: rgba(0, 1, 0, 0);
}

/*定义滑块 内阴影+圆角*/
.white::-webkit-scrollbar-thumb {
  /*滚动条的内阴影*/
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3) inset;

  /*滚动条的圆角*/
  border-radius: 10px;

  /*滚动条的背景颜色*/
  background-color: #737871;
}
.formSubmit{
  width: 100%;
  padding: 20px;
  text-align: right;

  position: absolute;
  bottom: 50px;
  right: 20px;
}


</style>


最终实现的效果图如下。
右侧有下拉框、右下角固定住提交按钮即可

o k ,本期结束,关注作者不迷路~持续更新好用的组件~ ok,本期结束,关注作者不迷路~持续更新好用的组件~ ok,本期结束,关注作者不迷路~持续更新好用的组件~

转载请注明出处或者链接地址:https://www.qianduange.cn//article/13122.html
标签
评论
发布的文章

html 个人主页

2024-07-13 22:07:08

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!