美兰十三的想疗院


一个不务正业的前端狗,爱纹身、玩乐队、哥金党、专门写Bug~


微信浏览器禁止页面下拉查看网址(不影响页面内部scroll)

微信浏览器禁止页面下拉查看网址(不影响页面内部scroll)

fc2a8e95-7b13-4394-ab5e-ae139bdfff35
原文链接:http://www.jianshu.com/p/2eddee561971\n\n此类事件是手机touchmove默认事件行为,可以通过js代码隐藏事件:

$(‘body’).on(‘touchmove’, function (event) {event.preventDefault();});

OR

document.addEventListener('touchmove', function(e){e.preventDefault()}, false);

但这样往往会把页面原生的scroll效果也一同去掉了 也就是说所有都无法滚动了,下面的代码可以完美解决这个问题:

var overscroll = function(el) {
    el.addEventListener('touchstart', function() {
        var top = el.scrollTop, totalScroll = el.scrollHeight, currentScroll = top + el.offsetHeight;
        //If we're at the top or the bottom of the containers
        //scroll, push up or down one pixel.
        //
        //this prevents the scroll from "passing through" to
        //the body.
        if(top === 0) {
            el.scrollTop = 1;
        } else if (currentScroll === totalScroll) {
            el.scrollTop = top - 1;
        }
    });
    el.addEventListener('touchmove', function(evt) {
        //if the content is actually scrollable, i.e. the content is long enough
        //that scrolling can occur
        if(el.offsetHeight < el.scrollHeight)
        evt._isScroller = true;
    });
}                
overscroll(document.querySelector('.scroll'));
document.body.addEventListener('touchmove', function(evt) {
    //In this case, the default behavior is scrolling the body, which
    //would result in an overflow.  Since we don't want that, we preventDefault.
    if(!evt._isScroller) {
        evt.preventDefault();
        }
    });

详情见:
prevent-overscroll

2017-06-27 更新

一个更简洁的方法

    function stopDrop() {
        var lastY;//最后一次y坐标点
        $(document.body).on('touchstart', function(event) {
            lastY = event.originalEvent.changedTouches[0].clientY;//点击屏幕时记录最后一次Y度坐标。
        });
        $(document.body).on('touchmove', function(event) {
            var y = event.originalEvent.changedTouches[0].clientY;
            var st = $(this).scrollTop(); //滚动条高度
            if (y >= lastY && st <= 10) {//如果滚动条高度小于0,可以理解为到顶了,且是下拉情况下,阻止touchmove事件。
                lastY = y;
                event.preventDefault();
            }
            lastY = y;
        });
    }

2018-06-28 更新

以上方法已不可行\n最新的通用方法:
body下放一个容器(div等),用这个容器包裹所有内容,然后对这个容器做fixed定位

建议打赏金额1-10元

支付宝打赏

微信打赏

最近的文章

用n和nvm来管理你的node

node更新太快。。。伴随而来的是一些包 也随之一起更新,然后。。。我们的node难道要一直更新么?更新再退回可是很麻烦的,尤其是当不同的项目中要用到不同版本的node,那你真的是 想哭都哭不出来了。…

n, nvm 继续阅读
更早的文章

另一种Ghost站内搜索不需要Lunr 和 jQuery(another way to add Search Fn to Ghost Blog, No need Lunr & jQuery )

语言 / Language * 中文说明 * EN 中文说明 上一篇文章中 我们使用了 GhostHunter 作为ghost博客的站内搜索引擎, 但是GhostHunter 是基…

GHOST, GhostBot 继续阅读
comments powered by Disqus
沪ICP备15043964号-3