vue简单实现滚动条

背景：产品提了一个需求在一个详情页，一个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 ，本期结束，关注作者不迷路～持续更新好用的组件～$