关于移动端弹层下的body滚动

这个问题在移动端挺常见的,网上也有一些解决方法,现在笔者来总结一下:css的解决方案都有兼容问题,js是比较稳定的解决方法(虽然比较麻烦)

ps: 本文的例子都是用vue写的

关于css的解决方案

1. overflow:hidden;

这是最多人开始想到的解决方法,虽然在pc端可以解决问题,但在移动端是不行的,

但有人说在html,body同时设置overflow:hidden可以,但经测试,效果不啥的。。。

在安卓上勉强还行,但会有一卡一卡的效果,ios上直接不行。用手机查看例子.

// vue
watch:{
showMark:function(val){
if(val){
document.body.style.overflow = 'hidden';
document.documentElement.style.overflow = 'hidden';
}else{
document.body.style.overflow = 'auto';
document.documentElement.style.overflow = 'auto';
}
}
}

2.position:fixed

这个方法比上一个方法好多了,经测试,安卓上运行良好,ios上的微信浏览器也可以

但设置body为fixed定位的同时,滚动的位置为跳回顶部。貌似可以用这个?

嗯,如果你不介意页面弹回顶部的话,但我想在复杂的页面上估计会有小问题,特别在body上用到transform的时候,fixed会有奇怪的bug。用手机查看例子

// vue
watch:{
showMark:function(val){
if(val){
document.body.style.position = 'fixed';
}else{
document.body.style.overflow = 'static';
}
}
}

3. pointer-events: none;

嗯,别用这个,试过在弹层上使用这个样式,无效,在body上才行,但会把touch事件都去掉。。。

用手机查看例子

关于js的解决方案

当弹层的元素不需要滚动的情况

嗯,这种情况就好办,直接阻止在弹层上touchmove事件。用手机查看例子

// vue下,直接加一个@touchmove.prevent

// 用原生js,则统一给一个class元素添加touchmove事件,并阻止默认行为
// 这里使用了jquery
$('.stop-scroll').on('touchmove',function(e){
e.preventDefault();
})

当弹层的元素需要滚动的情况

嗯,这种情况就复杂了,需要自己模拟一个滚动的效果,你可以自己找一个合适的插件,或者参考一下笔者的插件touchScroll.js,又或者你自己动手写一个适合项目的插件。用手机查看例子

// touchScroll.js初始化(vue)
mounted(){
this.touchScroll = new TouchScroll({
target: this.$refs.content, //模拟滚动的对象
des:'y',//x,y
noScrolls: [this.$refs.mark] //不需要滚动的对象列表
}); },
watch:{
showPupop(val){
if(val){
// 打开弹层获取高度
this.touchScroll.start();
}else{
// 关闭弹窗重置
this.touchScroll.reset();
}
}
}

关于移动端弹层下的body滚动的更多相关文章

  1. [vuejs] vue2.0-layer-mobile移动端弹层

    vue2.0-layer-mobile移动端弹层 本次组件升级支持slot内容分发功能,实现高定制内容风格的弹层 安装方法 npm install vue2-layer-mobile -S 初始化 i ...

  2. js 弹层下面的body禁止滚动

    弹窗是一种常见的交互方式,而蒙层是弹窗必不可少的元素,用于隔断页面与弹窗区块,暂时阻断页面的交互.但是,在蒙层元素中滑动的时候,滑到内容的尽头时,再继续滑动,蒙层底部的页面会开始滚动,显然这不是我们想 ...

  3. JS弹出层制作,以及移动端禁止弹出层下内容滚动,overflow:hidden移动端失效问题

    HTML <div class="layer"> <div class="menu-list"> <span>社会</ ...

  4. js - 移动端的超出滚动功能,附带滚动条,可解决弹层中滚动穿透问题。

    背景: 弹层里边有可滚动区域时,在移动端的坑我就不多说了. 找了很多解决滚动穿透的方案,最终都不能完美解决. 一气之下自己js撸了一个. 效果图: 原理: 1.解决滚动穿透:通过给弹层绑定touchm ...

  5. 解决: 移动端经mouseover显示出的弹层中链接点击问题

    通常我们会遇到这样的需求,导航菜单在鼠标划过的时候显示自定义弹层,在弹层中有一些链接需要点击后跳转或者其他一些事件.比如: $(".menu li").on("mouse ...

  6. 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框

    vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...

  7. vue3系列:vue3.0自定义全局弹层V3Layer|vue3.x pc桌面端弹窗组件

    基于Vue3.0开发PC桌面端自定义对话框组件V3Layer. 前两天有分享一个vue3.0移动端弹出层组件,今天分享的是最新开发的vue3.0版pc端弹窗组件. V3Layer 一款使用vue3.0 ...

  8. layerweb弹层组件(SSH框架下)

    action类 这里主要看业务方法中表单路径中的(isClose = "1";return resUri;) public class MaterialsAction extend ...

  9. 富文本编辑器UEditor自定义工具栏(二、插入图片、音频、视频个性化功能按钮和弹层及自定义分页符)

    导读:本篇将简单探讨插入图片.音频.视频的功能按钮实现方式 传送门:富文本编辑器UEditor自定义工具栏(一.基础配置与字体.背景色.行间距.超链接实现) 一.效果图 1.UEditor自定义工具栏 ...

随机推荐

  1. PHP原生DOM对象操作XML的方法解答

    创建一个新的XML文件,并且写入一些数据到这个XML文件中. /** 创建xml文件*/ $info = array(array('obj' => 'power','info' => 'p ...

  2. php框架tp3.2.3和js写的微信分享功能心得,分享的标题内容图片自定义

    https://blog.csdn.net/weixin_42231483/article/details/81585322 最近用PHP的tp3.2.3框架和js写的微信分享功能心得,分享的标题内容 ...

  3. Minitab软件是现代质量管理统计的领先者,全球六西格玛实施的共同语言,以无可比拟的强大功能和简易的可视化操作深受广大质量学者和统计专家的青睐。

    Minitab软件是现代质量管理统计的领先者,全球六西格玛实施的共同语言,以无可比拟的强大功能和简易的可视化操作深受广大质量学者和统计专家的青睐. MINITAB 功能菜单包括:基础和高级统计工具: ...

  4. li设置多选和取消选择的样式、输入数据类型判断

    li设置多选和取消选择的样式: $('li').click(function(){ if($(this).hasClass('active')) {$(this).removeClass('activ ...

  5. python ddt 实现数据驱动

    ddt 是第三方模块,需安装, pip install ddt DDT包含类的装饰器ddt和两个方法装饰器data(直接输入测试数据) 通常情况下,data中的数据按照一个参数传递给测试用例,如果da ...

  6. oracle 数据库安全审计

    Oracle的审计机制是用来监视用户对ORACLE数据库所做的各种操作. 在缺省情况下,系统的审计功能是关闭的.可以在INIT.ORA参数文件中将参数AUDIT_TRAIL设置为正整数来激活. 审计功 ...

  7. Inno setup 卸载时删除程序文件夹(文件)

    Inno setup 卸载时删除程序文件夹(文件) //删除所有配置文件以达到干净卸载的目的 procedure CurUninstallStepChanged(CurUninstallStep: T ...

  8. mysql通过日志恢复数据库

    案例:http://www.linuxidc.com/Linux/2012-11/74005.htm http://blog.csdn.net/ssrc0604hx/article/details/1 ...

  9. SSH applicationContext.xml import异常

    近期在项目上,遇到了一个问题.在配置applicationContext.xml使用<import>标签引入其他的xml文件时,导致项目启动时过慢.有时还会引起启动异常.后来查到是xml文 ...

  10. Java练习 SDUT-3081_谁是最强女汉子

    谁是最强的女汉子 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 众所周知,一年一度的女汉子大赛又来啦.由于最近女汉子比 ...