网站开发哈尔滨网站开发公司郑州网络营销与网站推广

背景：产品提了一个需求在一个详情页，一个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>

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

$ok，本期结束，关注作者不迷路～持续更新好用的组件～$