vue获取自定义滚动条位置

最新推荐文章于 2025-05-21 10:38:33 发布

范范_

最新推荐文章于 2025-05-21 10:38:33 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.csdn.net/qq_40853132/article/details/128967470

VUE 专栏收录该内容

5 篇文章

订阅专栏

示例代码展示了在Vue.js应用中如何监听一个具有滚动功能的div元素，并获取其滚动位置。通过`<divref=scrollDiv@scroll=scrollEvent`设置，当div内容超出高度并滚动时，触发`scrollEvent`方法，该方法记录了元素的scrollTop值，即距上边的距离。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码如下：

	<div ref="scrollDiv" @scroll="scrollEvent" style="height: 100px;overflow: auto;">
	  这是一段很长的文字。后面省略。。。
	</div>

	scrollEvent() {
	 // this.scrollLeft = this.$refs.scrollDiv.scrollLeft; // 距左边距离
	  this.scrollTop = this.$refs.scrollDiv.scrollTop; // 距上边距离
	  // console.log('this.scrollLeft--------------', this.scrollLeft);
	  console.log('this.scrollTop--------------', this.scrollTop);
	}