vue 页面滚动条的逻辑处理

最新推荐文章于 2024-07-18 16:34:01 发布

孤身不觉晚

最新推荐文章于 2024-07-18 16:34:01 发布

阅读量220

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_40043424/article/details/115933477

本文介绍了一种在网页全屏展示前后保持页面滚动位置不变的方法。通过监听滚动条距离顶部的距离，在全屏展示关闭后调整滚动条回到之前的位置，确保用户体验。此方案适用于需要全屏展示内容而又不想丢失浏览上下文的应用场景。

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

问题：点击页面某处的按钮实现全屏展示，关闭全屏展示后滚动条会初始化。

需求：关闭全屏后滚动条不初始化，点击前后页面位置不改变。

逻辑：监听点击前滚动条距离顶部的距离，关闭后改变滚动条初始化的位置。

实现：

<div id='wrap' ref="Scroll"></div>
//data
scrollTop: 0,
scrollNum:0
//mounted
document.querySelector("#wrap").addEventListener('scroll', ()=> {
//监听滚动条的高度
				this.scrollTop = document.querySelector("#wrap").scrollTop;
			},true)
//methods
click(val) {
//点击事件触发
				this.scrollNum = this.scrollTop;
				this.$nextTick(() => {
					this.$refs.Scroll.scrollTop = this.scrollNum;
				})

			}