对移动端滚动高度的获取

对移动端滚动高度的获取 通过采用原生js的方法来实现,绑定vue中的dom元素,通过添加ref来获取,但是同名只能绑定一个,this.$refs.domName来获取,

function homeScrollEvent() {
const pageScrollTop = document.body.scrollTop
if (pageScrollTop > 80) {
store.dispatch(‘updateHeader‘, false)
} else {
store.dispatch(‘updateHeader‘, true)
}
}

处理浏览器前进后退问题

router.beforeEach((to, from, next) => {
if (to.meta.isHome) {
store.dispatch(‘updateHeader‘, true)
document.addEventListener(‘scroll‘, homeScrollEvent)
} else {
document.removeEventListener(‘scroll‘, homeScrollEvent)//移除scroll监听事件,事件名必须与添加监听完全一致才能移除成功
store.dispatch(‘updateHeader‘, false)
}
next()
})

时间: 2024-10-10 16:16:38

对移动端滚动高度的获取的相关文章

BetterScroll 在移动端滚动场景的应用

BetterScroll 是一款重点解决移动端各种滚动场景需求的开源插件( GitHub地址 ),适用于滚动列表.选择器.轮播图.索引列表.开屏引导等应用场景. 为了满足这些场景,它不仅支持惯性滚动.边界回弹.滚动条淡入淡出等效果的灵活配置,让滚动更加流畅,同时还提供了很多 API 方法和事件,以便我们更快地实现滚动场景下的需求,如下拉刷新.上拉加载. 由于它基于原生 JavaScript 实现,不依赖任何框架,所以既可以原生 JavaScript 引用,也可以与目前前端 MVVM 框架结合使用

移动端滚动翻页

<!DOCTYPE html> <html ng-app="plunker"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="format-dete

前端开发跨浏览器计算页面大小、滚动高度

前端开发中跨平台.跨USER-AGENT的适配很繁琐 想要得到浏览器px大小非常烦.因此以下2个函数非常实用 这两个javascript函数很有用,用来计算浏览器页面大小,窗体大小,以及滚动高度,源码例如以下: function getPageSize() { var xScroll, yScroll; if (window.innerHeight && window.scrollMaxY) { xScroll = window.innerWidth + window.scrollMaxX

jQuery使用scrollTop获取div标签的滚动条已滚动高度(jQuery版本1.6+时,用prop()方法代替attr()方法)

$("#content").append('<div>' + data.msg + '</div>'+.'<br>');$('#content').attr({ scrollTop: $('#content').attr('scrollHeight') }); //jQuery版本1.6+时,用prop()方法代替attr()方法:[重点,否则获取不到]$('#content').prop({ scrollTop: $('#content').pro

Vue项目移动端滚动穿透问题

概述 今天在做 Vue 移动端项目的时候遇到了滚动穿透问题,在网上查资料后,选取了我觉得最好的方法,记录下来供以后开发时参考,相信对其他人也有用. 上层无需滚动 如果上层无需滚动的话,直接屏蔽上层的 touchmove 事件即可.示例如下: <div @touchmove.prevent> 我是里面的内容 </div> 上层需要滚动 如果上层需要滚动的话,那么固定的时候先获取 body 的滑动距离,然后用 fixed 固定,用 top 模拟滚动距离:不固定的时候用获取 top 的值

jquery实现高度的获取-位置函数

一.位置函数 1.offset() 获取匹配元素在当前视口的相对偏移.返回的对象包含两个整形属性:top 和 left.此方法只对可见元素有效. 2.innerWidth() 获取第一个匹配元素内部区域宽度(包括补白.不包括边框).此方法对可见和隐藏元素均有效.返回值:整型数据3.innerHeight() 获取第一个匹配元素内部区域高度(包括补白.不包括边框).此方法对可见和隐藏元素均有效.返回值:整型数据 4.outerWidth() 获取第一个匹配元素外部宽度(默认包括补白和边框).此方法

ajax post 请求 ,java端使用 request.getParameter 获取不到数据问题

js端 $.ajax({ type:'POST', data:{a:1}, url:_this.apiUrl+url, dataType:'json',//使用jsonp方式请求 contentType:"application/json; charset=utf-8", json:"callback",//jsonp名 success:function(re){ }}); @PostMapping(value = "/queryProduct"

移动端图标拖动并获取移动后的坐标

这两天在做关于合同盖章的需求,要求在移动端能拖动章,并获取章的坐标.在网上也看了一些相关代码,最后整理出一份demo.整理的匆忙,代码仍存在bug,当第一次移动章手指抬起后,再次点击一下章,坐标将改变,这点后期仍待改进. $(function(){ var cirX=0;//圆心X横坐标 var cirY=0;//圆心Y纵坐标 var moveX=0;//移动中触点X横坐标 var moveY=0;//移动中触点Y纵坐标 var boxW=$(".box").width();//章宽

Flutter Native调用Dart端方法,并获取数据

参考资料:https://blog.csdn.net/julystroy/article/details/87367520 举个例子,我们想从Native端请求Flutter端的一个getFlutterName方法获取一个字符串.在Flutter端你需要给MethodChannel设置一个MethodCallHandler: platform.setMethodCallHandler(platformCallHandler); Future<dynamic> platformCallHandl