当第一次写这个问题的时候,并不知道竟然还会写2,而且(1)也并没有解决问题。

也发现,这个问题,真实也困住了很多人,找到了张鑫旭(http://www.zhangxinxu.com/wordpress/2016/12/web-mobile-scroll-prevent-window-js-css/)写的一个方法,非常厉害,但存在些许误差,自己也研究了下,对于当前的项目用此方法也并不好加,所以放弃,

又看到有说是有iscroll.js插件,稍微研究下,果断下手,但是,因为,遮罩层里的div高度是自动撑开的,所以高度不定,所以必须在初始化的时候做一个延时,

setTimeout(function(){
var slideul = new IScroll("#slideul");
},100)

不然,无法滑动(本人项目用的是vue);

然后,在遮罩层的地方,再做一个遮罩层,背景透明,然后,touchmove事件中,阻止默认事件,就ok了。

终于大功告成!呼~~~

关于小窗滑动,父级body也跟随滑动的解决方案(2)的更多相关文章

  1. 关于小窗滑动,父级body也跟随滑动的解决方案

    需求:当前页面是信息列表,所以高度由内容自动填充, 所以页面可以上下滑动,加载更多, 但是下发物料一栏又为一个列表 所以做了一个弹窗框,因为是列表所以高度自然又是不可控的,所以给了一个最大高度,当超出 ...

  2. Android自定义Seekbar滑动条,Pop提示跟随滑动按钮一起滑动

    由于项目需要做出此效果,自定义写了一个. 效果图 思路: 原始的seekbar只有滑动条并没有下方的提示文字,所以我们必须要继承Seekbar重写这个控件. 代码: 在values文件夹下新建attr ...

  3. [jQuery]相对父级元素的fixed定位

    (function($) {     var DNG = {};     //----------------------------------------------------/     // ...

  4. 一个 VUE 组件:实现子元素 scroll 父元素容器不跟随滚动(兼容PC、移动端)

    介绍 我们经常遇到一种情况.当滑动滚动条区域时,子元素滚动条到底部或顶部时就会触发父级滚动条,父级滚动条同理会继续向上触发,直至body容器.这是浏览器默认的滚动行为. 但是很多情况,我们想要子元素滚 ...

  5. Jquery遍历之获取子级元素、同级元素和父级元素

    Jquery遍历之获取子级元素.同级元素和父级元素 Jquery的遍历,其实就当前位置的元素相对于其他元素的位置的关系进行查找或选取HTML元素.以某项选择开始,并沿着这条线进行移动,或向上(父级). ...

  6. 利用CSS背景颜色属性使父级div背景透明同时避免子级标签透明。

    实现背景色透明效果的代码 实现各个浏览器中具备良好的透明特性的效果,IE中使用私有滤镜filter,高端浏览器使用CSS3中的rgba属性. 输入十六进制的颜色值以及透明度,自动在IE的过渡滤镜以及C ...

  7. [Unity3D]巧妙利用父级子级实现Camera场景平面漫游

    本文系作者原创,转载请注明出处 入门级的笔者想了一上午才搞懂那个欧拉角的Camera旋转..=.= 在调试场景的时候,每次都本能的按下W想前进,但是这是不可能的(呵呵) 于是便心血来潮想顺便添加个Ke ...

  8. css使absolute相对于父容器进行定位而不是以body(为什么绝对定位(absolute)的父级元素必须是相对定位(relative))

    借知乎的回答如下解释: 首先,我想告诉你的是,如果父级元素是绝对定位(absolute)或者没有设置,里面的绝对定位(absolute)自动以body定位.这句话是错的.正确的是:只要父级元素设了po ...

  9. 关于chart.js 设置canvas的宽度为父级元素的宽度的百分百 以及 X轴上面刻度数据太多如何处理

    今天在做一个数据统计的界面的时候,需要做折线统计图,在网上找了一圈发现数据统计的插件还是不少的,本着轻量级的的原则选择了Chart.js,后来在做的过程中便遇到两个问题,以此记录下来,和刚刚接触前端的 ...

随机推荐

  1. 禁止 pdf 下载、打印的方法

    https://blog.csdn.net/For_GG/article/details/78616063 https://blog.csdn.net/xiangcns/article/details ...

  2. canvas(三) star- demo

    /** * Created by xianrongbin on 2017/3/8. * 本例子使用渐变画出 璀璨星空 */ var dom = document.getElementById('clo ...

  3. 如何查询linux下BIOS信息

    一般可以使用dmidecode命令(还有biosdecode命令可参考),背景知识如下: SMBIOS (System Management BIOS)是主板或系统制造者以标准格式显示产品管理信息所需 ...

  4. linux 查看信息-系统&资源

    系统 1.查看内核/操作系统/CPU信息 2.查看操作系统版本 3.查看CPU信息 4.查看计算机名 5.列出所有PCI设备 6.列出所有的USB设备 7.列出加载的内核模块 8.查看环境变量 资源 ...

  5. tensorflow学习之(五)构造简单神经网络 并展示拟合过程

    # def 添加层 如何构造神经网络 并展示拟合过程 import tensorflow as tf import numpy as np import matplotlib.pyplot as pl ...

  6. http协议基本原理

    HTTP(HyperText Transport Protocol)是超文本传输协议的缩写,它用于传送WWW方式的数据,关于HTTP协议的详细内容请参考RFC2616.HTTP协议采用了请求/响应模型 ...

  7. js 新增标签、标签属性

    var table = document.getElementById('content_list'); console.log(ret.data.length); ;i<ret.data.le ...

  8. 简单易用的图像库stb_image

    最近又回到了选择图像库的老问题上,之前用过FreeImage,DevIL,libpng. FreeImage的问题是他的Licence有点迷,双证书,除了GPL还有个自己的没读懂,不商用的话随便折腾, ...

  9. Java生成静态HTML文件

    private static final String FILEPATH = "/opt/nginx/html/banner/"; private static final Str ...

  10. shell脚本学习-printf命令

    跟着RUNOOB网站的教程学习的笔记 printf命令模仿C程序库里的printf()程序.printf由POSIX标准所定义,因此使用printf的脚本比使用echo有着更好的移植性. printf ...