Vue中如何用鼠标滑轮进行横向滑动不显示滚动条
Posted 龖龖龖
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue中如何用鼠标滑轮进行横向滑动不显示滚动条相关的知识,希望对你有一定的参考价值。
1.页面
//父盒子
<div class="navHistory gzparkNavWarp" @mousewheel="handleMouseWheel">
//子盒子
<el-tag
class="gzparkNav"
v-for="tag in tags"
:key="tag.name"
closable
:type="tag.type"
:disable-transitions="true"
@close="handleClose(tag)"
>
tag.name
</el-tag>
</div>
2.在vue methods方法中定义
methods:
//滑动鼠标滚轮实现横向滚动
handleMouseWheel(e)
const scrollLeft = document.querySelector(".gzparkNavWarp").scrollLeft;
const offsetWidth = document.querySelector(".gzparkNavWarp").offsetWidth;
const scrollWidth = document.querySelector(".gzparkNavWarp").scrollWidth;
if (e.wheelDelta < 0 && scrollLeft + offsetWidth < scrollWidth)
document.querySelector(".gzparkNavWarp").scrollLeft =
document.querySelector(".gzparkNavWarp").scrollLeft + 100;
else if (e.wheelDelta > 0 && scrollLeft > 0)
document.querySelector(".gzparkNavWarp").scrollLeft =
document.querySelector(".gzparkNavWarp").scrollLeft - 100;
,
<style lang="scss" scoped>
.navHistory //父盒子
width: 100%;
height: 40px;
border-bottom: 1px solid #ccc;
display: flex;
align-items: center;
overflow: hidden;//清除滚动条
.gzparkNav //子盒子
margin: 0 10px;
</style>
以上是关于Vue中如何用鼠标滑轮进行横向滑动不显示滚动条的主要内容,如果未能解决你的问题,请参考以下文章