JS监听滚动id自动定位滚动

吴维炜

于 2018-08-28 11:37:56 发布

阅读量2.4k

点赞数 4

分类专栏： # MUI 前端就那么回事 Vue2.0从零到一文章标签： MUI 移动端滚动到指定位置 MUI原生滚动到指定位置 H5元素滚动到指定位置

本文链接：https://blog.csdn.net/qq_38209578/article/details/82145329

版权

前端就那么回事同时被 3 个专栏收录

119 篇文章 22 订阅 ¥19.90 ¥99.00

订阅专栏

Vue2.0从零到一

36 篇文章 7 订阅 ¥19.90 ¥99.00

订阅专栏

MUI

5 篇文章 0 订阅

订阅专栏

本文介绍了使用原生JS进行滚动监听和id定位滚动的方法，适用于Vue项目。关键代码展示了在VUE中如何操作，同时文章提及了MUI滚动到指定元素位置的更新以及新增的Vue兼容方法，支持多种浏览器。

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

本文主要介绍原生JS进行滚动监听和id定位滚动，与效果锚点类似，适用于vue。

关键性代码如下：

var scroll = document.documentElement.scrollTop || document.body.scrollTop; //获取屏幕距离顶部的距离

.js // 下述方法是引入mui+vue的案例，展示代码为methods里面的方法

init:function(){
	doc.addEventListener("scroll",function(){  // 实时监听，如果是ios需要做300ms延迟，否则点击索引的时候，对象距离顶部的高度不够，会出现闪动的效果，体验感不佳
		if(!noScroll){
			var appealDo =  vm.$el.querySelector("#appealDo").offsetTop- 45; //获取#appealDo距离顶部的距离
			var appealComm =  vm.$el.querySelector("#appealComm").offsetTop- 45; //获取#appealComm距离顶部的距离
			var scrollTop = doc.body.scrollTop ||  doc.documentElement.scrollTop; //获取屏幕距离顶部的距离
			if(s

了解本专栏