vue DOM滚动事件，获取DOM滚动条距离DOM底部的距离

最新推荐文章于 2024-07-25 18:48:28 发布

LILEILEILOVE

最新推荐文章于 2024-07-25 18:48:28 发布

阅读量1.4k

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/LILEILEILOVE/article/details/121735401

版权

本文探讨了在Vue.js应用中如何监听DOM滚动事件，并详细讲解了如何计算DOM滚动条距离底部的距离，这对于实现无限滚动加载或者自定义滚动效果至关重要。通过结合JavaScript的API，可以有效地实现对滚动事件的响应并获取精确的滚动位置。

摘要由CSDN通过智能技术生成

<ul @scroll.passive = 'scroll(e)' style="height:200px;overflow:auto;">
<li>aaaa</li>
</ul>



scroll(e){
   
let scrollBottom

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

LILEILEILOVE

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue 移动端项目，动态控制div距离底部的距离

weixin_30737363的博客

01-02

2145

<template> <div class="details"> <com-nav-bar title="保险详情"> <i class="iconfont icon-xiangzuo" slot="left"></i> </com-nav-bar> ...

获取div元素距离可视窗口底部的距离

Cool_so_cool的博客

07-13

4070

当前可视区域的高度 - （元素到文档顶部的距离 - 滚动条滚动的距离）- 元素自身的高度 dom是当前要获取的元素 window.innerHeight - (dom.offsetTop - window.pageYOffset) - dom.offsetHeight

参与评论您还未登录，请先登录后发表或查看评论

dom滚动时判断内部盒子与顶部的距离

最新发布

weixin_47495465的博客

07-25

171

3、设置位置标杆并给ref，当父盒子滚动的时，判断标杆离窗口顶部的距离。2、在mounted时通过refs找到该dom并添加滚动监听。methods（滚动时判断标杆距与顶部的距离并做其他操作）4、判断如果距离小于15，就把需要浮动的盒子浮动。其中throttle方法，为lodash节流。1、给外层dom添加超出滑动样式并给ref。需要引入（也可不要throttle直接用）mounted（开启监听盒子滚动）

vue滚动条事件（获取滚动条距离底部距离）

weixin_30532987的博客

06-05

6624

网上大部分vue的滚动条操作是监听dom实现，我是用@scroll实现首先有滚动条的div一定要设固定高度，然后overflow:auto;出现滚动条 passive是使滚动更加流畅，减少卡顿 <div @scroll.passive="getScroll($event)" style="height:100px;overflow:auto;"> &lt...

vue3获取页面横向和纵向滚动距离

haosicx的博客

03-23

2856

创建一个hooks文件保存进去就行 import { ref, onMounted, onBeforeMount } from 'vue' export function useWindowScroll () { const x = ref(0) const y = ref(0) const onScroll = () => { x.value = document.documentElement.scrollLeft y.value = document.docume.

vue 监听滚动条（获取滚动条距离底部距离）

m0_56363729的博客

01-24

2093

参考链接：https://www.cnblogs.com/yck123/p/10978941.html @scroll实现首先有滚动条的div一定要设固定高度，然后overflow:auto;出现滚动条 passive是使滚动更加流畅，减少卡顿, <div id="my" @scroll.passive="getScroll($event)"></div> getScroll(event) { // 滚动条距离底部的距离scrollBottom let

点击标签滚动到可视区域--scrollIntoView() ----和获取窗口滚动距离

weixin_57246351的博客

08-26

700

// 评论滑动 moveFn () { // 真实DOM都在document(所以不再一个vue文件内), 也是可以获取的 document.querySelector('.like-box').scrollIntoView({ behavior: 'smooth' //带动画效果,平滑的滚动 }) }

vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)

11-20

本文将详细介绍如何在 Vue 中实现滚动相关的功能，包括判断是否滚动到底部、滚动方向检测、滚动节流以及获取滚动区域的 DOM 元素。 ### 1. 是否滚动到底部在 Vue 中，可以通过监听滚动事件并获取滚动区域的相关...

vue 中滚动条始终定位在底部的方法

10-18

本文主要介绍在Vue项目中如何实现滚动条始终定位在底部的方法。首先，一种简单但不总是可靠的方法是直接操作DOM元素来改变滚动条的位置。具体做法是，通过获取列表容器元素的引用，并设置其`scrollTop`属性为`...

vue进入页面时滚动条始终在底部代码实例

10-17

总结起来，Vue中实现页面加载时滚动条始终在底部，可以通过直接操作DOM元素的`scrollTop`属性或利用第三方库如`better-scroll`。同时，自定义滚动条样式可以提供更好的用户体验。注意，这种方法适用于静态内容，若...

vue获取元素距离页面顶部的距离_原生js来写获取元素距离顶部距离，以及滚动条滚动指定距离和时间控制...

weixin_39907526的博客

12-20

1612

这是我在写vue项目里封装的一个公共js类里面还有一些其他的方法，一并拿过来了class Public {isDesktop(){ //判断是否为pc端return (window.screen.width > 1023) ? true : false;}/** formatMoney(s,type)* 功能：金额按千位逗号分隔* 参数：s，需要格式化的金额数值.* 参数：type,判断格式...

vue js 获取滚动距离以及返回顶部按钮

ownlight的博客

10-29

830

获取滚动距离判断是否回到顶部 data() { return { scrollNum: 0, //滚动距离 isTop: false, //是否显示回到顶部按钮 }; }, mounted() { window.addEventListener("scroll", () => { let top = document.documentElement.scrollTop || document..

vue 默认滚动到指定位置

weixin_42295994的博客

06-03

1583

1.单独区域内可滚动 <van-cell-group ref="reList" class="rechargeList"> <van-grid :column-num="3" clickable border> <van-grid-item v-for="(item, index) in items" :key="index" :text="item.name" style="height: 13vh" /&g

Vue 通过ref 控制滚动距离

weixin_33922670的博客

01-18

6994

如何通过ref来控制滚动条滚动的距离 ** 在vue里通过ref来获取dom，并且通过点击来控制滚动条滚动距离。这里要注意直接用 $refs 是没有效果的如下 ** let _this = this; _this.$refs.menu.scrollLeft = '300'; 复制代码** 通过ref 获取的DOM 是vue 的虚拟dom，想要操作真实DOM需要加上 $el** let _th...

vue 获取 for循环动态设置ref的属性及获取该元素到顶部的距离

m0_46251434的博客

02-11

1211

vue 获取for循环动态渲染的元素的ref属性

vue 监听滚动条距离顶部的距离_原生JS实现返回顶部动画效果

weixin_39598941的博客

12-03

1919

效果滚动条非匀速滚动，由快到慢效果。主要 api ,属性document.documentElement.scrollTop：获取滚动条距离顶部高度，给它赋值可以设置滚动条高度。浏览器支持度：支持谷歌，火狐， IE10+setInterval 定时器基本思路点击返回到顶部按钮的时候，执行函数；函数首先获取当前滚动条距离顶部的高度，然后新建一个定时器；定时器内部执行document.documen...

JS获取某一个DOM元素距视窗的位置信息

fth1002853070的博客

09-03

959

我们可以调用getBoundingClientRect方法，来获取，一个Dom元素距离视窗的各种信息。详见：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect var aDiv = document.getElementById('aDiv'); console.log(aDiv.getBo...

dom元素滚动条高度 js_js 元素高度宽度整理

weixin_39966465的博客

12-22

127

该属性还可以通过赋值内容自动滚动到某个位置，js如下：var oDiv=document.querySelector('.one');oDiv.scrollTop=20;oDiv.onscroll=function(){console.log(this.scrollTop+":"+this.scrollLeft);}通过直接设定div的scrollTop,让它直接显示在滚动条在20垂直方向上20的...

Vue 2.x 实现虚拟滚动条示例与组件设计

本篇文章主要介绍了如何在基于Vue.js 2.x的项目中实现虚拟滚动条的示例代码。作者从一次对开源CMS项目的观察开始，引出了对虚拟滚动条（如slimScroll）的好奇和研究。他发现通过CSS和JavaScript可以创建一个与原生...