p1：在 `onMounted` 钩子函数中,监听滚动条事件（点语法+`toRefs`）

<template><div style="width:3000px;height:3000px" ><p>onscrollLeft：{{ x }}</p><p>onscrollTop：{{ y }}</p></div>
</template><script>
import { onMounted, reactive } from 'vue-demi'
import { toRefs } from '@vueuse/core'export default {setup () {// 1.定义初始变量，用 reactive 函数变成响应式数据const scrollObj = reactive({x: 0,y: 0})// 2.在 onMounted 钩子函数中 触发滚动条事件onMounted(() => {window.onscroll = () => {// 3.获取值，取整scrollObj.x = parseInt(document.documentElement.scrollLeft)scrollObj.y = parseInt(document.documentElement.scrollTop)}})// 4. 使用 toRefs() return 出去return { ...toRefs(scrollObj) }}
}
</script>

p2：在 `onMounted` 钩子函数中,监听滚动条事件（`addEventListener`+`ref`）

<template><div style="width:3000px;height:3000px" ><p>onscrollLeft：{{ x }}</p><p>onscrollTop：{{ y }}</p></div>
</template><script>
import { onMounted, ref } from 'vue'
export default {setup () {// 1.定义初始变量，用 ref 函数变成响应式数据const x = ref(0)const y = ref(0)// 2.在 onMounted 钩子函数中 触发滚动条事件onMounted(() => {window.addEventListener('scroll', () => {// 3.获取值，取整x.value = parseInt(document.documentElement.scrollLeft)y.value = parseInt(document.documentElement.scrollTop)})})// 4.return 出去return { x, y }}
}
</script>

p3：利用第三方： `vueuse/core`重构

vueuse/core : 组合式API常用复用逻辑的集合

<template><div style="width: 3000px; height: 3000px"><p>onscrollLeft：{{ x }}</p><p>onscrollTop：{{ y }}</p></div>
</template><script>
// 1.下包 yarn add @vueuse/core@5.3.0(重构)
// 2.导入 useWindowScroll 函数
import { useWindowScroll } from '@vueuse/core'
export default {setup () {// 3.解构赋值// const { x } = useWindowScroll()// const { y } = useWindowScroll()const { x, y } = useWindowScroll()// 4.return 出去，就可以直接使用return { x, y }}
}
</script>

vue3 计算滚动条的滚动距离相关推荐

DOM初探（14）——查看滚动条的滚动距离
一:DOM基本操作: 查看滚动条的滚动距离 window.pageXOffset/pageYOffset IE8及以下不兼容(只有IE9以上的浏览器能用) document.body/document ...
前端：计算滚动条距底部多远（距离底部的百分比）
// 获取某固定元素滚动的高度 const scrollHeight = document.getElementById('mobileRenderContent').scrollHeight;// ...
Android 仿拼多多可水平滚动RecyclerView,自定义滚动条滚动距离
Android 仿拼多多可水平滚动RecyclerView,自定义滚动条滚动距离 2020年,希望大家一切平安如意,毕竟这是个出人意料的多事之秋. 一.效果图: 二.快速实现: 1.主函数代码: im ...
获取滚动条滚动距离兼容写法
在chrome中,浏览器的滚动条是属于body的,可以通过 document.body.scrollTop来获取垂直滚动距离, document.body.scrollLeft来获取水平滚动距离, 火 ...
利用js获取滚动条滚动距离，实现图片固定在屏幕的某个位置
利用js获取滚动条滚动距离,实现图片固定在屏幕的某个位置思路: 1.获取对象距离顶部和左侧的距离: 2.获取元素对象: 3.当滚动条滚动时获取滚动条滚动的距离: 4.滚动条滚动时执行函数:对象距离顶 ...
datagridview滚动条自动滚动_Win32编程基础之滚动条
(图片来源:游戏<ATRI> 通过使用滚动条,窗口可以显示比它大的文档或图片,用户可以滚动用户区中的数据对象来看到对象超出窗口边界的部分. 如果窗口的用户区比窗口的边框要大,窗口应该使用滚 ...
DOM-5【兼容】滚动距离与高度、兼容模式、可视尺寸
查看滚动条的距离方法版本 window.pageXOffset / pageYOffset IE9/IE8及以下不支持(常规) document.body.scrollLeft/scrollTop ...
页面宽高，窗口宽高，元素宽高，元素位置，页面滚动距离
注:以下内容只适用于chrome 页面宽高: document.body.clientWidth/Height(不包括margin) document.body.offsetWidth/Height( ...
HTML滚动条平滑移动,孟欣 - JS缓冲效果,平滑移动（滚动条平滑滚动）
JS缓冲效果,平滑移动(滚动条平滑滚动) 举个栗子: 点击导航栏的锚点,改变scroll的位置.(页面不是瞬间闪到,有个缓冲的效果) 点击button,页面瞬间闪到目标位置,这个功能很简单,不再啰嗦 ...

vue3 计算滚动条的滚动距离

p1：在 `onMounted` 钩子函数中,监听滚动条事件（点语法+`toRefs`）

p2：在 `onMounted` 钩子函数中,监听滚动条事件（`addEventListener`+`ref`）

p3：利用第三方： `vueuse/core`重构

vue3 计算滚动条的滚动距离相关推荐

最新文章

热门文章

vue3 计算滚动条的滚动距离

p1：在 onMounted 钩子函数中,监听滚动条事件（点语法+toRefs）

p2：在 onMounted 钩子函数中,监听滚动条事件（addEventListener+ref）

p3：利用第三方： vueuse/core重构

vue3 计算滚动条的滚动距离相关推荐

最新文章

热门文章

p1：在 `onMounted` 钩子函数中,监听滚动条事件（点语法+`toRefs`）

p2：在 `onMounted` 钩子函数中,监听滚动条事件（`addEventListener`+`ref`）

p3：利用第三方： `vueuse/core`重构