vue3区域滚动
vue3区域滚动
从HTML属性区域内进行滚动
属性
属性 | 说明 |
---|---|
clientWidth | 获取元素可视部分的宽度,即 CSS 的 width 和 padding 属性值之和,元素边框和滚动条不包括在内,也不包含任何可能的滚动区域。 |
clientWidth | 获取元素可视部分的高度,即 CSS 的 height 和 padding 属性值之和,元素边框和滚动条不包括在内,也不包含任何可能的滚动区域。 |
offsetWidth | 元素在页面中占据的宽度总和,包括 width、padding、border 以及滚动条的宽度。 |
offsetHeight | 只读属性,返回该元素的像素高度,高度包含该元素的垂直内边距和边框,且是一个整数。 |
scrollWidth | 只读属性,是元素内容宽度的一种度量,括由于溢出导致的视图中不可见内容。 |
scrollHeight | 只读属性,是元素内容宽度的一种度量,括由于溢出导致的视图中不可见内容。 |
scrollTop | 可以获取或设置一个元素的内容垂直滚动的像素数。 |
scrollLeft | 可以读取或设置元素滚动条到元素左边的距离。 |
横向滚动
// HTML
<div ref="xxxRef"></div>
<button @click="onScroll('left')"></button>
<button @click="onScroll('right')"></button>
// JS
import { ref, nextTick } from 'vue'
const xxxRef = ref(null)
const onScroll = (type) => {
nextTick(() => {
const distance = type === 'left' ? 0 : xxxRef.value.scrollWidth;
xxxRef.value.scrollLeft = distance
})
}
竖向滚动
// HTML
<div ref="xxxRef"></div>
<button @click="onScroll('top')">顶部</button>
<button @click="onScroll('bottom')">底部</button>
// JS
import { ref, nextTick } from 'vue'
const xxxRef = ref(null)
const onScroll = (type) => {
nextTick(() => {
const distance = type === 'top' ? 0 : xxxRef.value.scrollHeight;
xxxRef.value.scrollTop = distance
})
}
滑动指定位置
<button @click="onScroll2(200)">下滑</button>
<button @click="onScroll3(200)">上划</button>
<div ref="xxxRef"></div>
const onScroll2 = (type: number) => {
nextTick(() => {
xxxRef.value.scrollTop += type
})
}
const onScroll3 = (type: number) => {
nextTick(() => {
xxxRef.value.scrollTop -= type
})
}
丝滑滚动
scroll-behavior: smooth;
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」