VUE：指定元素内，鼠标滚轮横向滚动内容，支持平滑滚动简介具体实现注意完整代码

84 阅读 0 评论 56 点赞

我是靠谱客的博主不安发夹，最近开发中收集的这篇文章主要介绍VUE：指定元素内，鼠标滚轮横向滚动内容，支持平滑滚动简介具体实现注意完整代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

简介

页面上，有纵向滚动的元素，也有横向滚动的元素。由于纵向滚动是默认的，所以就需要把横向滚动事件区分开来。

具体实现

对需要滚动条（纵向转变为横向）的标签设置个id（避免重复），然后调用如下 setScroolFun 方法（注意元素渲染后调用）。

data () {
return {
documentObj : null
}
},
methods: {
/*容器绑定鼠标滚轮事件*/
setScroolFun() {
//绑定的容器
this.documentObj = document.getElementById('jjListDiv') // 获取DOM元素节点
// 添加监听事件（不同浏览器，事件方法不一样，所以可以作判断，也可以如下偷懒）
this.documentObj.addEventListener('DOMMouseScroll', this.handlerMouserScroll, false)//滚轮事件
this.documentObj.addEventListener('mousewheel', this.handlerMouserScroll, false)//滚轮事件
},
handlerMouserScroll(event) {
//获取滚轮跨距，兼容获取方式
let detail = event.wheelDelta || event.detail || event.wheelDeltaY
/*反向*/
let moveForwardStep = -1
/*正向*/
let moveBackStep = 1
let step = 0
//如果跨步大于0，表明正向跨步，将跨步放大100倍，改变滑动速度，如果跨步小于0，表明反向跨步，将跨步放大500倍，改变滑动速度
step = detail > 0 ? moveForwardStep * 80 : moveBackStep * 80
/*覆盖当前滚动条的位置,单位是像素，叠增或剃减*/
this.documentObj.scrollLeft = this.documentObj.scrollLeft + step
//平滑值(越小越慢，不能小于等于0)
let slipNum = 0.8
//末尾值（越小，则越平稳，越大越仓促）
let endNum = 5
/*递减步伐值*/
let decreasingPaceNum = step
/*速度*/
let paceNum=60;
/*效果一*/
let t = setInterval(() => {
if (Math.abs(decreasingPaceNum) < endNum) {
clearInterval(t)
return
}
decreasingPaceNum = decreasingPaceNum * slipNum
this.documentObj.scrollLeft = this.documentObj.scrollLeft + decreasingPaceNum
}, paceNum)
/*效果二*/
/*for(let i=1;Math.abs(decreasingPaceNum) > endNum;i++){
decreasingPaceNum = decreasingPaceNum * slipNum
setTimeout(() => {
this.documentObj.scrollLeft = this.documentObj.scrollLeft + decreasingPaceNum
}, i * paceNum)
}*/
},
}

注意

页面销毁时，取消监听事件，避免资源浪费！

//销毁事件
beforeDestroy() {
if (!this.documentObj) return
this.documentObj.removeEventListener('DOMMouseScroll', this.handlerMouserScroll)
this.documentObj.removeEventListener('mousewheel', this.handlerMouserScroll)
}

完整代码

index.vue

<style>
.bg-purple-light {
background: #e5e9f2;
}
.grid-content {
border-radius: 4px;
min-height: 36px;
}
.lateral-sliding {
display: flex;
overflow-y: hidden;
overflow-x: scroll;
}
.lateral-sliding-item {
display: flex;
margin-right: 8px;
background-color: yellow;
}
.each-img {
min-width: 350px;
min-height: 758px;
}
</style>
<template>
<div class="app-container">
<el-row :gutter="15" type="flex" justify="start" align="middle">
<!--左侧条件-->
<el-col v-if="!hideSearch" :span="4">
<div class="grid-content ">
<el-form :model="ruleForm"
status-icon
:rules="rules"
label-suffix=":"
inline-message
label-position="left"
ref="ruleForm"
label-width="100px"
size="mini"
class=""
:inline="false">
<el-form-item label="基金代码" prop="jjCode">
<el-input style="max-width: 184px" v-model.number="ruleForm.code">
</el-input>
</el-form-item>
<el-form-item label="基金经理" prop="jjjl">
<el-input style="max-width: 184px" v-model.number="ruleForm.jjjl">
</el-input>
</el-form-item>
<el-form-item label="基金类型" prop="jjType">
<el-select v-model="ruleForm.jjType" placeholder="请选择">
<el-option
v-for="item in jjTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="晨星等级" prop="cxGrade">
<div @dblclick="dblclickCxGrade">
<el-rate
v-model="ruleForm.cxGrade"
:texts="['很差','较差','一般','较好','优秀']"
show-text
:colors="['#99A9BF', '#F7BA2A', '#FF9900']">
</el-rate>
</div>
</el-form-item>
<el-form-item label="时间" prop="time">
<el-select v-model="ruleForm.time" placeholder="请选择">
<el-option
v-for="item in timeOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="规模" prop="guiMo">
<el-select v-model="ruleForm.guiMo" placeholder="请选择">
<el-option
v-for="item in guimoOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
<el-option disabled value="guiMo">
自定义
<el-input @input="checkMoneyS($event)" v-model="guiMoStart"
style="width: 60px"/>
至
<el-input @input="checkMoneyS($event)" v-model="guiMoEnd"
style="width: 60px"/>
（亿元）
</el-option>
</el-select>
</el-form-item>
<el-form-item label="所属板块" prop="ssBanKuai">
<el-select v-model="ruleForm.ssBanKuai" placeholder="请选择">
<el-option
v-for="item in ssBanKuaiOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary">搜索</el-button>
<el-button>重置</el-button>
</el-form-item>
</el-form>
</div>
</el-col>
<el-divider content-position="left" direction="vertical">====</el-divider>
<!--列表-->
<el-col :span="20">
<div id="jjListDiv" class="grid-content bg-purple-light lateral-sliding">
<div class="lateral-sliding-item" v-for="(item,index) in 99" :key="index">
<div class="each-img">{{index}}</div>
</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import 'element-ui/lib/theme-chalk/display.css'
export default {
name: 'list',
components: {},
props: {},
data() {
return {
documentObj: null,
currentDate: new Date(),
/*左侧容器显示状态*/
hideSearch: false,
/*左侧搜索表单*/
ruleForm: {
JJCode: '',//基金代码
jjjl: '',//基金经理
jjType: '',//基金类型
cxGrade: 0,//晨星等级
time: '',//时间
guiMo: '',//规模
ssBanKuai: ''//所属板块
},
guiMoStart: 100,
guiMoEnd: 300,
/*基金规模选项*/
guimoOptions: [
{
value: '不限',
label: '不限'
}, {
value: '10亿以内',
label: '10亿以内'
}, {
value: '10至50亿',
label: '10至50亿'
}, {
value: '50至150亿',
label: '50至150亿'
}, {
value: '大于150亿',
label: '大于150亿'
}],
/*板块选项*/
ssBanKuaiOptions: [
{
value: '白酒',
label: '白酒'
}, {
value: '医药',
label: '医药'
}, {
value: '军工',
label: '军工'
}, {
value: '新能源',
label: '新能源'
}, {
value: '有色金属',
label: '有色金属'
}],
/*时间选项*/
timeOptions: [
{
value: '今年来',
label: '今年来'
}, {
value: '日涨幅',
label: '日涨幅'
}, {
value: '近一周',
label: '近一周'
}, {
value: '近一月',
label: '近一月'
}, {
value: '近一年',
label: '近一年'
}
, {
value: '近两年',
label: '近两年'
}
, {
value: '近三年',
label: '近三年'
}
, {
value: '近五年',
label: '近五年'
}
, {
value: '成立以来',
label: '成立以来'
}],
/*基金类型选项*/
jjTypeOptions: [
{
value: '混合型',
label: '混合型'
}, {
value: '股票型',
label: '股票型'
}, {
value: '债券型',
label: '债券型'
}, {
value: '指数型',
label: '指数型'
}, {
value: 'FOF型',
label: 'QDll型'
}],
/*左侧搜索表单校验*/
rules: {
/*age: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
],*/
}
}
},
watch: {
/*监听晨星等级变化*/
/*'ruleForm.cxGrade': {
handler: function(o, l) {
}
},
*/
/*
/!*监听晨星等级变化*!/
getCxGrade: {
handler: function(o,l) {
console.log('o,l::', o,l)
},
}*/
},
computed: {
getCxGrade: function() {
return this.ruleForm.cxGrade
}
},
created() {
},
mounted() {
this.$nextTick(() => {
this.setScroolFun()
})
},
beforeDestroy() {
if (!this.documentObj) return
this.documentObj.removeEventListener('DOMMouseScroll', this.handlerMouserScroll)
this.documentObj.removeEventListener('mousewheel', this.handlerMouserScroll)
},
methods: {
/*容器绑定鼠标滚轮事件*/
setScroolFun() {
//绑定的容器
this.documentObj = document.getElementById('jjListDiv') // 获取DOM元素节点
// 添加监听事件（不同浏览器，事件方法不一样，所以可以作判断，也可以如下偷懒）
this.documentObj.addEventListener('DOMMouseScroll', this.handlerMouserScroll, false)//滚轮事件
this.documentObj.addEventListener('mousewheel', this.handlerMouserScroll, false)//滚轮事件
},
handlerMouserScroll(event) {
//获取滚轮跨距，兼容获取方式
let detail = event.wheelDelta || event.detail || event.wheelDeltaY
/*反向*/
let moveForwardStep = -1
/*正向*/
let moveBackStep = 1
let step = 0
//如果跨步大于0，表明正向跨步，将跨步放大100倍，改变滑动速度，如果跨步小于0，表明反向跨步，将跨步放大500倍，改变滑动速度
step = detail > 0 ? moveForwardStep * 80 : moveBackStep * 80
/*覆盖当前滚动条的位置,单位是像素，叠增或剃减*/
// this.documentObj.scrollLeft = this.documentObj.scrollLeft + step
//平滑值(越小越平滑越持久，反之，总之。总之，不能小于等于0，不能大于等于1，作者建议值：0.8)
let slipNum = 0.8
//末尾值（越小，则越平稳，越大，则越仓促，作者建议值：5）
let endNum = 5
/*递减步伐最大初始值=滚轮单位跨步值*/
let decreasingPaceNum = step
/*平滑速度，越大，则越慢，越小，则越慢，作者建议值：70*/
let paceNum=70;
/*效果一*/
let t = setInterval(() => {
if (Math.abs(decreasingPaceNum) < endNum) {
clearInterval(t)
return
}
decreasingPaceNum = decreasingPaceNum * slipNum
this.documentObj.scrollLeft = this.documentObj.scrollLeft + decreasingPaceNum
}, paceNum)
},
/*规模校验*/
checkMoneyS(value) {
if (!value) {
this.$message.error('不能为空')
} else if (value < 1 || value > 1000) {
this.$message.error('应在1在1000之间')
} else {
let reg = /(^[1-9]d*$)///小数点左边最高16位，小数点右边最多4位
if (reg.test(value)) {
if (this.guiMoStart >= this.guiMoEnd) {
this.$message.error('前者应该小于后者')
}
this.ruleForm.guiMo = this.guiMoStart + '至' + this.guiMoEnd + '亿'
} else {
this.$message.error('应该为正整数')
}
}
}
,
/*晨星等级：双击清空*/
dblclickCxGrade() {
this.ruleForm.cxGrade = 0
}
}
}
</script>
<style lang="scss" scoped>
</style>