在
Vue 项目中实现一个
内容超出
时可以通过
横向拖动查看的容器，并且不显示
横向滚动条，可以通过结合
CSS 自定义
滚动条样式以及使用鼠标滚轮事件来实现。以下是一个完整的实现方案：
### 1. 容器结构与基本样式
首先定义一个容器，并
设置其宽度固定，
内容横向排列，同
时隐藏默认的
滚动条：
```html
<template>
<div class="scroll-container" ref="scrollContainer" @wheel="handleScroll">
<div class="scroll-content">
<!-- 动态或静态
内容 -->
<div v-for="(item, index) in items"
:key="index" class="scroll-item">
{{ item.label }}
</div>
</div>
</div>
</template>
```
对应的
CSS 样式如下：
```
css
.scroll-container {
width
: 100%;
overflow-x
: scroll;
white-space
: nowrap;
position
: relative;
-ms-overflow-style
: none; /* IE 和 Edge 隐藏
滚动条 */
scrollbar-width
: none; /* Firefox 隐藏
滚动条 */
}
.scroll-container
::-webkit-scrollbar {
display
: none; /* Chrome, Safari 隐藏
滚动条 */
}
.scroll-content {
display
: flex;
align-items
: center;
height
: 50px;
}
.scroll-item {
flex
: 0 0 auto;
padding
: 0 15px;
height
: 40px;
line-height
: 40px;
border
: 1px solid #ccc;
margin-right
: 10px;
border-radius
: 4px;
}
```
### 2. 实现鼠标滚轮控制
横向滚动
通过监听 `wheel` 事件并操作 `scrollLeft` 属性，可以实现通过鼠标滚轮
横向滚动
内容：
```
javascript
methods
: {
handleScroll(event) {
const container = this.$refs.scrollContainer;
const delta = Math.sign(event.deltaY);
const scrollStep =
30;
container.scrollLeft += delta * scrollStep;
event.preventDefault(); // 阻止默认的垂直滚动行为
}
}
```
###
3. 可选：添加拖拽滚动支持
如果希望用户可以通过鼠标拖拽来
横向滚动
内容，可以使用 `mousedown`、`mousemove` 和 `mouseup` 事件实现拖拽逻辑：
```
javascript
data() {
return {
isDragging
: false,
startX
: 0,
scrollLeft
: 0
};
},
methods
: {
startDrag(e) {
this.isDragging = true;
this.startX = e.pageX;
this.scrollLeft = this.$refs.scrollContainer.scrollLeft;
e.preventDefault();
},
dragging(e) {
if (!this.isDragging) return;
const x = e.pageX;
const walk = x - this.startX;
this.$refs.scrollContainer.scrollLeft = this.scrollLeft - walk;
},
stopDrag() {
this.isDragging = false;
}
}
```
在模板中绑定事件：
```html
<div
class="scroll-container"
ref="scrollContainer"
@wheel="handleScroll"
@mousedown="startDrag"
@mousemove="dragging"
@mouseup="stopDrag"
@mouseleave="stopDrag"
>
```
### 4. 数据准备
```
javascript
data() {
return {
items
: [
{ label
: &#
39;标签1&#
39; },
{ label
: &#
39;标签2&#
39; },
{ label
: &#
39;标签
3&#
39; },
{ label
: &#
39;非常长的标签名称4&#
39; },
{ label
: &#
39;标签5&#
39; },
{ label
: &#
39;标签6&#
39; },
{ label
: &#
39;标签7&#
39; }
]
};
}
```
---
文章讲述了在Vue3项目中遇到的页面背景颜色问题，即在缩放和滚动时背景不完整。解决方法是在App.vue的样式中将选择器设为`html,body`，确保背景颜色覆盖整个页面。
最低0.47元/天 解锁文章
扫一扫
6397
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
