Vue3:页面设置了背景颜色,缩小屏幕后横向拖动滚动条,右边内容没有背景颜色覆盖

文章讲述了在Vue3项目中遇到的页面背景颜色问题,即在缩放和滚动时背景不完整。解决方法是在App.vue的样式中将选择器设为`html,body`,确保背景颜色覆盖整个页面。

问题

在Vue3项目中,想给整个页面设置背景颜色,但是缩小浏览器后并横向拖动滚动条,发现右边的页面内容没有背景颜色覆盖,即背景颜色是空白的。

解决

  • 出现上述问题是因为背景颜色的样式没有正确应用到页面的所有部分
  • 如果想给整个页面一个背景颜色,需要将选择器设置为 body 或 html,在App.vue中设置以下样式:
<style lang="less">
html,
body {
   
   
  height: 100%;
  background-color: rgb(1
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; } ] }; } ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值