移动端使用模态框后滑动bug

﹏ヽ暗。殇╰゛Y 2022-03-26 14:20 172阅读 0赞

移动端使用模态框后，滑动时底层跟着滑动

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
            });
        };

模态框显示后仅允许部分滑动

$('#modal').modal("show");//显示模态框
    overscroll(document.querySelector('.lift-agreement'));//允许滚动的区域
    overscroll(document.querySelector('.modal'));//允许滚动的区域
    document.body.addEventListener('touchmove', function(evt) { 
    if(!evt._isScroller) { 
    	evt.preventDefault()
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，172人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML 模态框

HTML 模态框复制粘贴就能用 <!DOCTYPE html> <html> <head> <meta charset="ut

妖狐艹你老母/ 2022年10月29日 10:26/ 0 赞/ 176 阅读

相关 bootstrap 模态框

我们需要引入bootstrap.min.js 先创建模态框的触发装置： <button class="btn btn-primary btn-lg" data-to

你的名字/ 2022年08月01日 02:50/ 0 赞/ 333 阅读

相关移动端滑动

前言移动端，滑动是很常见的需求。很多同学都用过[swiper.js][]，本文从原理出发，实践出一个类swiper的滑动小插件[ice-skating][]。小插件

以你之姓@/ 2022年05月30日 08:45/ 0 赞/ 305 阅读

相关模态框

点击按钮弹出模态框的实现： html： <!DOCTYPE html> <html> <head> <meta charset="u

淡淡的烟草味﹌/ 2022年05月14日 14:24/ 0 赞/ 251 阅读

相关移动端使用模态框后滑动bug

移动端使用模态框后，滑动时底层跟着滑动 var overscroll = function(el) { el.addEventListene

﹏ヽ暗。殇╰゛Y/ 2022年03月26日 14:20/ 0 赞/ 173 阅读

相关 bootstrap--模态框

复制即可运行. 小模态框 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c

╰半橙微兮°/ 2022年02月21日 07:47/ 0 赞/ 403 阅读

相关 bootstrap模态框-单击模态框之外不关闭

在模态框标签添加如下标签：data-backdrop="static" data-keyboard="false"  <div cl

系统管理员/ 2022年02月03日 12:17/ 0 赞/ 384 阅读

相关模态框

模态框模态框，又是一种全新的异空间页面，本篇介绍的模态框开启后，除了窗体、框体之外的内容都被遮住了，点击不了，只能关闭后，其他之前的才能操作。 ![在这里插

爱被打了一巴掌/ 2022年01月26日 11:27/ 0 赞/ 363 阅读

相关 Revit 模态框

非模态窗口有一个好处，就是可以一直停留在程序之前，然后持续完成操作。但是在Revit二次开发中，非模态窗口也有几个注意事项。 1、需要在文档关闭的时候，把非模态窗口也关闭掉，

约定不等于承诺〃/ 2022年01月06日 20:29/ 0 赞/ 291 阅读

相关解决移动端，模态框、弹框滑动滚动，底部页面随着滑动、穿透的问题

移动端有个比较头疼的问题，就是在模态框、弹框中滑动，底部页面也随着滑动的问题。本文将从触摸事件、点击事件的顺序来解决这个问题。首先我们要明白 touch 和click

亦凉/ 2021年09月18日 01:12/ 0 赞/ 518 阅读