{site_name}

{site_name}

🌜 搜索

Vant4 是一款基于 Vue.js 的移动端 UI 组件库,其中的 useSc

前端 𝄐 0
vant4中文官网,vant4 表单,vant4 uniapp,vant4 popup,vant4 tab,vant4 商城模板
Vant4 是一款基于 Vue.js 的移动端 UI 组件库,其中的 useScrollParent 方法可以用来获取指定元素的滚动容器。

具体来说,useScrollParent 接受一个参数 el,表示要查找滚动容器的元素。它会返回一个对象,包含两个属性:

- scrollParent:表示 el 的滚动容器元素
- scrollTop:表示滚动容器的 scrollTop 值

例子:

vue
<template>
<div ref="wrap" style="height: 200px; overflow: auto;">
<div ref="content" style="height: 400px;">这里是内容</div>
</div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { useScrollParent } from 'vant'

export default {
setup() {
const wrapRef = ref(null)
const contentRef = ref(null)

onMounted(() => {
const { scrollParent, scrollTop } = useScrollParent(contentRef.value)
console.log(scrollParent) // 输出 wrapRef 元素
console.log(scrollTop) // 输出 0

scrollParent.scrollTop = 100
console.log(scrollTop) // 输出 100
})

return {
wrapRef,
contentRef,
}
},
}
</script>


在上面的例子中,我们创建了一个高度为 200px、带滚动条的 div 元素,并在其中放置了一个高度为 400px 的 div 元素。我们通过 useScrollParent(contentRef.value) 来获取内部 div 元素的滚动容器,然后可以对其进行操作,比如将 scrollTop 设为 100。注意,我们需要将 ref 对象传给 useScrollParent 方法,而不是直接传入 DOM 元素。