禁止微信浏览器的下拉滑动

FreeZinG 发布于2019-08-21 14:38 / 2263人阅读

摘要：禁止微信浏览器的下拉滑动解决思路先禁止的滚动事件再给需要的元素加上自定义的滚动事件注加入此代码后要给需要的元素加上的禁止的滚动事件给为的元素加上自定义的滚动事件

禁止微信浏览器的下拉滑动

解决思路：

1 先禁止body的滚动事件

2 再给需要scroll的元素加上自定义的滚动事件

注：加入此代码后要给需要scroll的元素加上.scroll的class

</>复制代码 
    var overscroll = function (els) {
        for (var i = 0; i < els.length; ++i) {
            var el = els[i];
            el.addEventListener("touchstart", function () {
                var top = this.scrollTop
                    , totalScroll = this.scrollHeight
                    , currentScroll = top + this.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) {
                    this.scrollTop = 1;
                } else if (currentScroll === totalScroll) {
                    this.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 (this.offsetHeight < this.scrollHeight)
                    evt._isScroller = true;
            });
        }
    };
    
    //禁止body的滚动事件
    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();
        }
    });
    
    //给class为.scroll的元素加上自定义的滚动事件
    overscroll(document.querySelectorAll(".scroll"));

GPU云服务器云服务器微信浏览器的webrtc php 禁止微信取消微信下拉小程序微信浏览器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87982.html

微信里面防止下拉"露底"组件

摘要：从本人这两个月移动实践的经验来看，微信的里面和的滑动效果无论是在安卓还是下的体验都很一般，有明显的卡顿现象，在安卓下面还会出现滑动过快的时候在页面停下来之后滚动条才闪到相应位置的现象。前言在微信里面浏览页面的时候，有一个很管用的方法可以区分这个页面是原生的还是H5形式的。随便打开一个页面，用力往下扯的时候，如果页面上方出现了黑底，黑底上有一行诸如网页由game.weixin.qq....

hot_pot_Leo 2019-08-21 10:41 评论0 收藏0
html+js(swiper.js)+css左右滑动切换页面效果，适配移动端

摘要：截图结构文件夹文件夹移动端左右滑动进度条微信内禁止上下拉上面加入了禁止微信下拉的，适合不会产生滚动条的页面，如果你的页面会有滚动条，请把禁止微信下拉的去掉，否则滚动条就被卡住不能往下拉了。和文件下载链接密码 demo： showImg(https://segmentfault.com/img/bV9TOy?w=280&h=280); 截图： showImg(https://segmen...

lcodecorex 2019-08-29 15:16 评论0 收藏0
html+js(swiper.js)+css左右滑动切换页面效果，适配移动端

摘要：截图结构文件夹文件夹移动端左右滑动进度条微信内禁止上下拉上面加入了禁止微信下拉的，适合不会产生滚动条的页面，如果你的页面会有滚动条，请把禁止微信下拉的去掉，否则滚动条就被卡住不能往下拉了。和文件下载链接密码 demo： showImg(https://segmentfault.com/img/bV9TOy?w=280&h=280); 截图： showImg(https://segmen...

FreeZinG 2019-08-26 11:54 评论0 收藏0
html+js(swiper.js)+css左右滑动切换页面效果，适配移动端

摘要：截图结构文件夹文件夹移动端左右滑动进度条微信内禁止上下拉上面加入了禁止微信下拉的，适合不会产生滚动条的页面，如果你的页面会有滚动条，请把禁止微信下拉的去掉，否则滚动条就被卡住不能往下拉了。和文件下载链接密码 demo： showImg(https://segmentfault.com/img/bV9TOy?w=280&h=280); 截图： showImg(https://segmen...

yacheng 2019-08-02 10:20 评论0 收藏0
微信小程序禁止弹框底部内容滑动

摘要：网友们的方法网友们有人使用的方式是给绑定一个空方法。这也是一个解决方法。友情提醒关于不能滚动的这个效果需要在真机上面查看，在编辑器上面看不到效果。本文首发于公众号前端的极致实现。欢迎小可爱们来交流加我微信拉大家进群我们需要解决的问题：当弹框显示的时候，弹框下面的内容不能滚动小程序的弹框特别多,像下面这样，弹框的底部是一个可以下拉的页面，但是当弹框出现的时候，需要禁止底部的滚动，那么...

terro 2019-08-26 10:22 评论0 收藏0