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

﹏ヽ暗。殇╰゛Y 2022-03-26 14:20 307阅读 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 条评论，307人围观）

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

相关阅读

相关模态框记录学习使用

模态框基于html 原生js 实现的模态框这是js请求 <script> //给导入按钮添加导入模态框表单 function modelV

刺骨的言语ヽ痛彻心扉/ 2023年10月05日 14:52/ 0 赞/ 102 阅读

相关 Vue 模态框的使用

vue模态框使用： Vue模态框可以使用多种方式实现，以下是其中一种基于Vue.js和Bootstrap的实现方式： 1.引入Bootstrap的CSS和JS文件到V

喜欢ヅ旅行/ 2023年10月04日 23:03/ 0 赞/ 109 阅读

相关 bootstrap 模态框

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

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

相关移动端滑动

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

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

相关模态框

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

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

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

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

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

相关 bootstrap--模态框

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

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

相关模态框

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

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

相关 Revit 模态框

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

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

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

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

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