完美解决移动端滚屏问题

2023-11-03

背景:移动端开发有弹出框时,下面页面还是可以滚动,本身也不是问题,但是有时候需要弹框出现,底部禁止滚动,如果需要,以下代码可以帮你实现效果:

// 在需要弹窗的代码里 调用stopBodyScroll ("true");
// 在关闭弹窗代码里 调用stopBodyScroll ();
    var  bodyEl = document.body;
    var  scrollTop = 0;
    function stopBodyScroll (isFixed) {
        bodyEl.style.left = '0';
        bodyEl.style.width = '100%';
        if (isFixed) {
            scrollTop = $(window).scrollTop();
            bodyEl.style.position = 'fixed';
            bodyEl.style.top = -scrollTop + 'px';
        } else {
            bodyEl.style.position = '';
            bodyEl.style.top = '';
            window.scrollTo(0, scrollTop) // 回到原先的top
        }
    }

以上代码可解决移动端滚屏问题,希望能对大家有用,另外欢迎评论区给出更加高效的方法,谢谢。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

完美解决移动端滚屏问题 的相关文章

  • 移动端日历插件(vue3-small-calendar)

    背景 同事做移动端项目时希望用到可平铺选择的日历插件 然度娘无过最后问题到我这边 虽然咱不是前端但是秉着技术问题不是问题且问题到我为止的原则 自己研究了2天完成了vue3 small calendar插件 此插件目前已发布npm 大家觉得可
  • 移动端物理像素和设备独立像素

    https blog csdn net aiolos1111 article details 51880223 https www cnblogs com samwu p 5341056 html http www softwhy com
  • weex实现带有跟手动画的tab栏

    在weex开发的群中看到有人提到这个问题 就想着去实现以下 还不是很完美 只支持一屏的tab栏内容 后续会进行优化 2019 6 20 更新 已支持滚动跟手 可以超出屏幕 2019 6 23 更新 解决子元素包含滚动标签时无法滑动切换的问题
  • uniapp canvas绘图

    问题描述 根据项目需求 将商品的图片 用户头像 二维码 商品信息绘制到分享海报中 效果展示 参数介绍 参数 类型 说明 avatarImg String 头像图片 bgImg String 背景图片 qrImg String 二维码 goo
  • 解决uniapp执行switchTab跳转成功之后不调用onLoad的方法

    目录 页面结构 遇到的问题 解决方案 页面结构 现有一个tab页面分为两个页签 一个下单页面 一个订单页面 onLoad 页签默认为下单 this current 0 获取商品列表 this getList 点击确认按钮提交订单之后 跳转到
  • H5当前页面选项卡切换,滚动顶部【记录】

    CSS样式中传入变量 鑫动了的主页 欢迎各位小伙伴 前端小白的成长之路 一起学习 一起成长 在H5中当前的页面难免会有多个选项卡切换的需求 在切换时 同一页面会记住相同位置 用户体验不是很好 我的需求就是切换选项卡 重回顶部 切记 targ
  • 前端对接微信公众号网页开发流程,前期配置

    微信公众号网页开发 其实就是我们开发的h5网页需要放到微信浏览器环境中使用 但是需要对接公众号授权 授权之后可以获取到用户的个人信息 以及可以使用公众号提供的一些API 如 图片上传 图片预览 获取位置信息 微信扫一扫等功能 在没有对接正式
  • uniapp 本地缓存剩余时间

    封装代码 在项目根目录项新建 utils 文件夹 再新建一个 idea js 文件 import store from store js module exports 计算剩余时间 timeRemaining val time return
  • H5之webcoekt播放JPEG图片流

    一 简介 既然webcoekt是基于tcp连接的 理论上讲所有的浏览器是可以私有协议处理二进制的 如果我们需要播放视频 我们可以将视频数据在后端解码后直接将图片推送到webcoekt前端 然后前端通过websocket接收图片然后将图片显示
  • uniapp 中父组件调用子组件方法

    需求描述 随着开发的深入和代码的维护 为了某些功能的实现可以说是又秃了几根 接下来就说一说 通过 ref 实现父组件调用子组件的方法等 1 父组件模板 在父级模块的子组件上添加属性 ref 和 属性名 mySon 随意 调用时使用 this
  • ios 固定定位 input获取焦点,ios 滚动条滚动 fixed固定定位失效,位置偏移

    http efe baidu com blog mobile fixed layout 还发现一个问题就是ios input设置readonly 还是能看到光标 然后解决方法是在行内写了 nf cus this blur
  • js与移动端交互

    1 js 调用移动端ios与android方法 2 移动端ios与android调用js方法 3 demo如下 div div
  • h5逻辑_H5+app 混合开发

    目录 app分类 h5与原生进行交互 1 判断h5页面打开的环境是ios android 2 JS与客户端互相调用 js调用ios的方法 js调用android的方法 error android接收不到参数 js调用ios与android的
  • 【微信公众号】微信公众号授权出现的常见问题解决方案

    问题1 在微信公众号授权时出现了 解决方案 1 首先查看后端的url配置是否正确 是否进行了转码 官方API上说明了redirectUrl应使用String redirectUri URLEncoder encode redirectUrl
  • 去掉li前面的圆点

    在HTML中使用无序列表ul li的时候通常前面会出现一个圆点 那么如何把这个圆点去掉呢 在 li 里使用 list style none 案列演示 没有使用list style none 使用list style none 示例代码 ul
  • 如何在PC上查看一个web页面在移动端的展示效果

    最近在chrome上发现一个东东 emulation 这个果断可以用来模拟web页面在移动端的显示结果 F12的界面 点击 Show drawer 就可以看到这个界面了 这里可以选择各种设备 选中之后 点击emulate就可以模拟了 这个就
  • ckplayer 播放视频

    备注 其中引用文件无法上传 如果需要私信即可
  • 公众号H5开发如何在本地调试

    1 设置本地hosts的地址映射 如blog test com映射127 0 0 1 方法 修改hosts的地址映射 使域名解析到指定IP 2 配置公众号网页授权获取用户基本信息 3 修改vue配置 vue cli3创建的项目 在项目根目录
  • 禁止ios浏览器页面上下滚动 (橡皮筋效果)弹性滚动 微信的下拉回弹

    发现之前阻止页面滚动的代码e preventDefault代码失效了 于是自己折腾了一番 找到了解决办法 一 前言 浏览器在移动端有一个默认触摸滚动的效果 让我们感触最深的莫过于微信浏览器里面 下拉时自带橡皮筋的效果 然而在开发的时候我们经
  • ADB:实现双击效果

    命令 adb shell seq 2 while read i do input tap 993 814 input tap 993 814 sleep 0 01 done 但是 上述命令有时候变成两次点击 成功率大概80 左右把 没办法

随机推荐

  • adb shell 内存参数详解

    摘自https www cnblogs com zl1991 p 6644998 html 感谢原创作者 1 adb shell procrank PID Vss Rss Pss Uss cmdline 32657 2254196K 372
  • NDK 入门HelloJni 以及 javah 找不到类文件的问题 解决(ubuntu)

    1 首先创建一个android工程 创建一个HelloJni java 文件 并编写如下代码 package com ndk import android app Activity import android os Bundle impo
  • 几种经典的卷积神经网络模型

    目录 1 卷积神经网络解决的问题 2 经典的卷积神经网络 2 1 LeNet 2 2 AlexNet 2 3 VGG 2 3 1 VGG块 2 3 2 VGG网络 2 4 NiN 2 4 1 Nin块 2 4 2 Nin网络 2 5 Goo
  • java语句的执行结构

    class R1 static System out println 1 public static void main String args System out println 2 new Child class Parent sta
  • Js保留小数点

  • Pyroch损失函数之BCELoss

    这也是最近在做的一个模型中的损失函数 所有就一探究竟了解一下这个函数 首先它是一个二分类损失函数 可以是单标签的损失函数也可是多标签的损失函数 1 单标签 这个图像是不是猫 1代表是 0代表不是 这就是单标签的二分类问题 2 多标签 和单标
  • python 处理pandas的panel数据

    与pd Series和pd DataFrame类似 pd Panel是pandas的数据容器之一 它是用来处理具有三个维度的数据的 进而pd Panel有3个轴 axis 分别是 items axis 0 每个item对应一个DataFra
  • 在完美数联的面试经历

    在完美数联的面试经历 大三上学期结束的寒假我在boss上投简历 得到完美数联的面试机会 面试之前啥也没准备 就兴冲冲的去了 然后很惨烈 一共三轮面试 前两轮是技术面试 第三轮是HR面试 第一轮是笔试 笔试大概20个人在一间会议室里面 每个人
  • GoLang学习计划

    我准备学习GoLang 是有点现实所迫 因为Java太难找工作了 我在BOSS直聘等网站刷了很久 一直没有满意的公司 哈哈 但是GoLang的岗位是非常多的 全是好企业 于是就下定决心 转战GoLang 努力学习 在学习之前 制订一个学习计
  • 病毒侵袭持续中 【HDU - 3065】【AC自动机】

    题目链接 就是求的是每个病毒出现的次数 可以重叠 嗯 最后别忘了释放内存 不然听说会MLE 但是我比较规矩 不会遇到这种现象的 MLE了一次 就记得要释放内存了 是一道AC自动机的模板题 include
  • CVE-2023-21839远程代码执行漏洞

    一 环境搭建 使用vulhub快速搭建环境 进入weblogic CVE 2023 210839目录下 执行命令 docker compose up d 部署完成后直接访问7001端口即可 http 192 168 5 183 7001 c
  • 教大家如何识别ChatGPT3.5和ChatGPT4.0

    教大家如何识别ChatGPT3 5和ChatGPT4 0 为什么写这篇文章 是因为目前市面上的镜像站很多接入的都是GPT3 5 但是冒充GPT4 0进行高价售卖 很多人说识别很简单 直接提问就行了 但是你不知道的是网站的建设者是可以提前设定
  • 免费的ai绘图工具+初级教程

    ChatGPT云炬学长 关注 由于我们还有很多小伙伴资金匮乏 没有体验到Midjourney 这样的绘图工具 尽管现在AI生成工具已经遍地开花 也几乎是0代码操作 但对于小白来说还是有许多门槛阻碍了我们完美体验AI生成的魅力 那么 今天我给
  • Crest Ocean System

    最新版本支持Unity3D 2019 4 8或以上 https github com crest ocean crest
  • 华为eNSP:OSPF DR和DBR选举实验

    OSPF DR和DBR选举 简介 OSPF协议 拓扑图 实验步骤 现象 理解现象 测试 R1 R2 R3 配置命令 R1上配置命令如下 R2上配置命令如下 R3上配置命令如下 文字介绍 简介 OSPF协议 定位 开放式最短路径优先 Open
  • linux-系统硬件信息查看方法

    系统硬件信息查看方法 CPU 1 利用文件进行查看 cat proc cpuinfo model name Intel R Core TM i5 8400 CPU 2 80GHz CPU品牌型号 physical id 0 表示CPU颗数
  • mysql练习-数据查询之连接查询

    连接查询 若在一个查询请求中 涉及到多个表中的数据 则需要进行连接查询 按连接方式分 内连接 默认连接类型 INNER JOIN 外连接 自连接 交叉连接 内连接 1 等值连接 连接运算符为 例 查询每个学生的基本信息及其选课情况 SELE
  • android的动态tab,怎么在Android中利用view实现一个Tab按钮动画效果

    怎么在Android中利用view实现一个Tab按钮动画效果 发布时间 2021 01 25 15 39 10 来源 亿速云 阅读 164 作者 Leah 这篇文章将为大家详细讲解有关怎么在Android中利用view实现一个Tab按钮动画
  • Backtrader获得当前持仓详情——持仓数量与持仓的名称

    Backtrader通过Position得到持仓的情况 Position官方文档 https www backtrader com docu position 在策略中 使用self broker positions获取全部的仓位情况 包括
  • 完美解决移动端滚屏问题

    背景 移动端开发有弹出框时 下面页面还是可以滚动 本身也不是问题 但是有时候需要弹框出现 底部禁止滚动 如果需要 以下代码可以帮你实现效果 在需要弹窗的代码里 调用stopBodyScroll true 在关闭弹窗代码里 调用stopBod