转自 http://www.eboy.me/archives/129: 在IOS端的微信中使用H5页面,页面滑动到底部时,再向上拉或页面在顶部时下拉,总会露出微信自带的底色:总是会让人不爽. 以下是一个相对完美的解决办法:原来是先禁止body的滚动事件,再允许内部div滚动: 一.设置body的css body{height:100%;overflow: hidden;} 二.禁止body: document.body.ontouchmove = function (e) { e.prevent…

一些移动设备有缺省的touchmove行为,比如说经典的iOS overscroll效果,当滚动超出了内容的界限时就引发视图反弹 阻止滚动: css: body{ height:100%; overflow-y:hidden; } js: function bodyScroll(){ e.preventDefault(); } document.addEventListener('touchmove', bodyScroll, false); //阻止 document.removeEventL…

该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 公司的移动端项目是基于zepto的,有一个页面要求文字能够无缝地不停向上滚动,但查了网上的资料,大多都是基于jquery的,虽然稍作修改就可以用于移动端,但不能实现触摸上下翻滚.所以就去了zepto的官网查看其API,却发现如果要使用zepto的swipe()方法,需要引用其已经封装好的touch.js文件,我就赶紧引用了这个js文件,可在实际测试中,官网给出的touch.js文件…

移动端web页面滚动不流畅,卡顿闪烁解决方案   1.ios端的-webkit-overflow-scrolling属性可控制页面滚动效果,设置如下实现惯性滚动和弹性效果: -webkit-overflow-scrolling: touch 2.position属性导致的页面滚动不流畅问题: <div style="overflow-x: hidden; overflow-y: auto; position: absolute; height: 200px;"> <d…

移动端的弹窗内容有滚动条,滚动到底部或顶部时或影响弹窗下的body滚动,某些浏览器滚动到顶部时不松手就触发了刷新页面的情况,如果不需要这样的默认体验,就需要加一下判断了. var startX,startY,endX,endY,distanceX,distanceY;//判断容器的滑动方向 //判断元素滑到底部时阻止滑动body,使用时传入局部滚动的选择器即可 function smartScroll(ele){ $(ele).on("touchstart", function (e)…

最近项目遇到了遮罩层的一些问题,总结一下: 弹出遮罩层 遮罩层弹出有非常多的方法,这里只写出本人用的代码,使用jq操作dom的方法进行实现的. <style>.box{position:absolute;width:100%;left:50%;height:auto;z-index:100;background-color:#f5f5f5;border:1px #ddd solid;padding:1px;}</style><div id="bg" v-c…

最近开发微信页面的时候遇到了这个问题, 因为移动端浏览器的原生滚动条样式很好,不像pc端那么难看,所以在页面需要滚动的地方用了原生的滚动条,这种滚动条在安卓浏览器中没有任何问题,但是在ios微信浏览器还是自带浏览器中都会反应迟钝,很难滑动,有的地方干脆不能滑,用户体验很垃圾,查了一些资料后, 找到了这个属性 -webkit-overflow-scrolling : touch; 然后把他加在overflow:auto:处, 完美解决了问题, 使得ios 滚动条的响应速度甚至超过了安卓, 感受只有…

前言 最近一个需求是弹窗展示列表,显然是需要一个滚动条的,而滚动到底部就会穿透到body滚动,而阻止默认行为是不行的,这样两个都滑动不了 所以我在点击出现弹窗的时候在body加了以下css让它没有滚动效果 $("body").css({ overflow:"hidden", height:"100%" }); 但是这样又出来一个问题,会在弹窗出来的时候body直接回到顶部,显然不是我愿意要的,所以这时候就需要让body显示在之前的高度,所以我们可…

解决办法一: elem.addEventListener( 'touchstart', fn, { passive: false } ); 解决办法二: * { touch-action: pan-y; } 使用全局样式样式去掉 Passive event listeners 2016年Google I/O上提出的概念,目的是用来提升页面滑动的流畅度. For instance, in Chrome for Android 80% of the touch events that block s…

背景: 弹层里边有可滚动区域时,在移动端的坑我就不多说了. 找了很多解决滚动穿透的方案,最终都不能完美解决. 一气之下自己js撸了一个. 效果图: 原理: 1.解决滚动穿透:通过给弹层绑定touchmove和mousewheel事件,取消默认行为实现. 2.取消默认行为后不能滚动:给需要滚动展示的区域绑定touchstart.touchmove和mousewheel事件,监听触发区域的Y值,对应修改可滚动区域的translateY值,实现滚动效果. 缺点/不足:滑动起来略显卡顿,用户体验不好,有…