微信页面滚动防露底

最近做移动端,总是遇到很蛋疼的问题, 决定把一些黑魔法记下来, 微信浏览器中想必会有很多事情让我大前端小伙伴头疼,23333终于皇天不负有心人, 在网上找到了一个可以防页面滚动滑到顶端或底部的时候, 漏出微信丑丑的灰色底[/偷笑]原文网址:https://blog.ghostry.cn/program/702.html我的核心代码:prevent:function () {    var startX = 0, startY = 0;    //touchstart事件    function touchSatrtFunc(evt) {        try        {            //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等

            var touch = evt.touches[0]; //获取第一个触点            var x = Number(touch.pageX); //页面触点X坐标            var y = Number(touch.pageY); //页面触点Y坐标            //记录触点初始位置            startX = x;            startY = y;

        } catch (e) {            alert(‘touchSatrtFunc:‘ + e.message);        }    }    document.addEventListener(‘touchstart‘, touchSatrtFunc, false);    var _ss = document.getElementById("contain");    _ss.ontouchmove = function (ev) {        var _point = ev.touches[0],            _top = _ss.scrollTop;        // 什么时候到底部        var _bottomFaVal = _ss.scrollHeight - _ss.offsetHeight;        // 到达顶端        if (_top === 0) {            // 阻止向下滑动            if (_point.clientY > startY) {                ev.preventDefault();            } else {                // 阻止冒泡                // 正常执行                ev.stopPropagation();            }        } else if (_top === _bottomFaVal) {            // 到达底部            // 阻止向上滑动            if (_point.clientY < startY) {                ev.preventDefault();            } else {                // 阻止冒泡                // 正常执行                ev.stopPropagation();            }        } else if (_top > 0 && _top < _bottomFaVal) {            ev.stopPropagation();        } else {            ev.preventDefault();        }    };}
时间: 2024-12-16 04:25:33

微信页面滚动防露底的相关文章

禁止body滚动允许div滚动防微信露底

最近遇到一个需求,页面中只有一个div允许滚动,其他内容不允许滚动. 正常来讲加上 body{height:100%;overflow: hidden;} 应该就阻止页面滚动了.可是很悲催的是手机端并不能很好的执行,而且还有弹性效果.所以只能对默认的滚动进行干涉.首先禁止body document.body.ontouchmove = function (e) { e.preventDefault(); }; 然后取得触摸点的坐标 var startX = 0, startY = 0; //to

微信小程序实现(禁止页面滚动、长按复制)

1. 禁止页面滚动对于小程序某些一屏的页面,特别是全屏的swiper,并不希望页面在竖直方向上可以滚动. 实现方式:在需要禁止滚动页面的json中加入: "disableScroll": true 1 注意:只在页面配置中有效,无法再app.json中设置该项 参考:https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#页面配置 2. 长按复制 <text class='copy_conten

js页面滚动时层智能浮动定位实现:

案例展示: 第一个:每个人都有看过的淘宝页面: 案例就不多说了,有兴趣的可以多去找找, 这样的智能浮动效果还是不错的,挺方便. 基本的实现原理: 首先有一个默认状态就是没有滚动的时候,什么事情也不用做,定位可以是absolute,也可以是stati,fixed,relartive 这些都可以.我们主要需要关注的是当浏览器滚动的时候,(要浮动的块)要移除浏览器界面视区的时候,修改其position属性,让其浮动在窗口的上沿显示就可以了.最好的position属性就是fixed了,可以在IE6+和其

基于html5整屏切换IDO智能手表页面滚动代码

之前为大大家介绍了一款jquery实现的整屏切换特效.今天分享一款IDO智能手表页面滚动html5代码.这是一款基于jQuery+HTML5实现的页面滚动效果代码.效果图如下: 在线预览   源码下载 部分代码: <div class="main" id="main"> <div class="page page1"> <div class="head-pic"> <div style

jquery页面滚动显示浮动菜单栏锚点定位效果

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <title>jQuery

微信页面开发 第三次总结

暂停微信页面开发,先处理yxt安卓司机版本. 司机端需求: 登入功能(由管理员分配账户),导航地图(提供搜索功能,寻找地点,快速导航) 接单控制=>是否接单,是否自动接单,接单类型 接单:当乘客抢到单后,司机有120秒时间可以抢单.参与抢单的司机会显示订单被抢,显示被谁抢.自己抢到,则显示去接乘客,或者呼叫乘客,去接乘客则显示路线导航,呼叫乘客则拨打乘客电话, 在接乘客时候显示距离和电话按钮,(乘客端可显示司机距离),司机点击接到乘客,订单状态变为服务中,同时,乘客端收到服务开始的消息. 服务过

页面滚动事件的使用

在现在更加追加页面加载速度和用户体验的情况下,页面的滚动事件使用的越来越多.通常我们使用滚动事件主要做的事情主要有: ajax异步加载,加快页面首次加载的速度 懒加载(或延迟加载):先把HTML元素放到textarea标签中,或把img的链接先放到一个字段里,页面滚动到某个位置时才进行开始加载 顶部导航或侧边导航的焦点跟踪 侧边数字导航的跟踪(例如百度经验) “回到顶部”功能 这两天做了一个demo,大家可以参考一下:页面滚动效果 上图中指出了用滚动事件实现的功能,不过demo中没有实现异步加载

页面滚动事件

页面滚动 事件:window.onscroll, 获得页面滚动位置:document.body.scrollTop: HTML代码: 这里注意此处逻辑,大于500就显示,否则就隐藏,还有注意如果变量名设置为top的话,就出错,都是小坑.

页面滚动显示或隐藏元素Headroom.js插件帮助你实现滚动效果

Headroom.js 是什么? Headroom.js 是一个轻量级.高性能的JS小工具(不依赖任何工具库!),它能在页面滚动时做出响应.此页面顶部的导航条就是一个鲜活的案例,当页面向下滚动时,导航条消失,当页面向上滚动时,导航条就出现了. Headroom.js 有什么用? 固定页头(导航条)可以方便用户在各个页面之间切换.但是这也会带来些问题…本文原创博客地址:http://www.cnblogs.com/unofficial官网地址:www.pushself.com) 大屏幕一般都是宽度