关于小窗滑动,父级body也跟随滑动的解决方案
需求:当前页面是信息列表,所以高度由内容自动填充,
所以页面可以上下滑动,加载更多,
但是下发物料一栏又为一个列表
所以做了一个弹窗框,因为是列表所以高度自然又是不可控的,所以给了一个最大高度,当超出以后可滑动,即overflow:scroll,
此时就遇到了问题,当我弹窗信息过多,需要滑动时,弹窗滑动,下面的body也会跟着滑动,所以此时必须要解决body滑动的问题。
然后就开始在scroll上做文章,监听scroll,动态给body添加overflow:hidden的属性,当关闭的时候再把该属性清除掉,
想的非常美,可是有遇到问题了,ul的高度大于我设定的最大高度时body可以添加上overflow:hidden的属性,可当ul的高度小于最大高度呢,此时的并没有触发scroll方法,
然后就各种想办法,想要得到弹窗的坐标,再得到当前点击的坐标判断是否在弹窗区域内,当在弹窗区域内不就可以触发了呗,搞了半天,结果突然醍醐灌顶,
发现一个大问题,我为什么不能在刚开始触发弹窗的时候就给body添加overflow:hidden的属性呢,不管此时的ul的高度时多少,body都是不能再滑动的,于是,终于大功告成。
关于小窗滑动,父级body也跟随滑动的解决方案的更多相关文章
- 关于小窗滑动,父级body也跟随滑动的解决方案(2)
当第一次写这个问题的时候,并不知道竟然还会写2,而且(1)也并没有解决问题. 也发现,这个问题,真实也困住了很多人,找到了张鑫旭(http://www.zhangxinxu.com/wordpress ...
- Android自定义Seekbar滑动条,Pop提示跟随滑动按钮一起滑动
由于项目需要做出此效果,自定义写了一个. 效果图 思路: 原始的seekbar只有滑动条并没有下方的提示文字,所以我们必须要继承Seekbar重写这个控件. 代码: 在values文件夹下新建attr ...
- [jQuery]相对父级元素的fixed定位
(function($) { var DNG = {}; //----------------------------------------------------/ // ...
- 一个 VUE 组件:实现子元素 scroll 父元素容器不跟随滚动(兼容PC、移动端)
介绍 我们经常遇到一种情况.当滑动滚动条区域时,子元素滚动条到底部或顶部时就会触发父级滚动条,父级滚动条同理会继续向上触发,直至body容器.这是浏览器默认的滚动行为. 但是很多情况,我们想要子元素滚 ...
- Jquery遍历之获取子级元素、同级元素和父级元素
Jquery遍历之获取子级元素.同级元素和父级元素 Jquery的遍历,其实就当前位置的元素相对于其他元素的位置的关系进行查找或选取HTML元素.以某项选择开始,并沿着这条线进行移动,或向上(父级). ...
- 利用CSS背景颜色属性使父级div背景透明同时避免子级标签透明。
实现背景色透明效果的代码 实现各个浏览器中具备良好的透明特性的效果,IE中使用私有滤镜filter,高端浏览器使用CSS3中的rgba属性. 输入十六进制的颜色值以及透明度,自动在IE的过渡滤镜以及C ...
- [Unity3D]巧妙利用父级子级实现Camera场景平面漫游
本文系作者原创,转载请注明出处 入门级的笔者想了一上午才搞懂那个欧拉角的Camera旋转..=.= 在调试场景的时候,每次都本能的按下W想前进,但是这是不可能的(呵呵) 于是便心血来潮想顺便添加个Ke ...
- css使absolute相对于父容器进行定位而不是以body(为什么绝对定位(absolute)的父级元素必须是相对定位(relative))
借知乎的回答如下解释: 首先,我想告诉你的是,如果父级元素是绝对定位(absolute)或者没有设置,里面的绝对定位(absolute)自动以body定位.这句话是错的.正确的是:只要父级元素设了po ...
- 关于chart.js 设置canvas的宽度为父级元素的宽度的百分百 以及 X轴上面刻度数据太多如何处理
今天在做一个数据统计的界面的时候,需要做折线统计图,在网上找了一圈发现数据统计的插件还是不少的,本着轻量级的的原则选择了Chart.js,后来在做的过程中便遇到两个问题,以此记录下来,和刚刚接触前端的 ...
随机推荐
- EntityFramework 基础提供程序在 Open 上失败
最近项目开始上线,所以抽时间学习了一下EF.虽然项目中一直在用,但是因为一些原因,一直是知其然不知其所以然,紧紧只限于会用而已.这两天自己搭建了一个MVC的EF框架,虽然也有参考网上各种资料,但是依然 ...
- adb、monkey常用命令
adb.monkey常用命令 1.查看连接设备 adb devices 2.连接android模拟器 adb connect 127.0.0.1:62001 3.安装软件 adb install 这个 ...
- Difference Among Mercedes Star Diagnostic Tool MB Star C3 C4 C5 C6
Mercedes Star Diagnostic Tool newly update to MB Star C6.There are many star diangostic tool in the ...
- rsync 定时备份<crontab+backrsync.sh> 简陋版
数据需要定时的备份至其它的目录中,但是备份之前检查检查一下是否有rsync正在运行,曾经因为数据过大,导致有很多rsync进程在跑,然后服务器有出现卡死的现象.最终写了一条bash,先检查一下是否有这 ...
- .net core 中使用ef 访问mysql
1.参考文档说修改项目文件添加,就得这么做,不然会报错 <ItemGroup> <DotNetCliToolReference Include="Microsoft.Ent ...
- Python Day 2
阅读目录: 内容回顾 编程语言介绍 python语言介绍 安装官方cpython解释器 --版本共存 运行python代码 --交互式:实时交互 --脚本式:运行py文件的三步骤 变量 ...
- SIFT算法
备注:源代码还未理解,所以未附上——下周任务 一.SIFT算法 1.算法简介 尺度不变特征转换即SIFT (Scale-invariant feature transform)是一种计算机视觉的算法 ...
- linux之用户密码破解的操作
一 无引导介质救援模式破解root用户密码 1 启动虚拟用户,在GRUB启动画面停留的那段时间,用上下键选择启动项. 2 用‘e’键进入你选择的启动项 ,然后用上下键将光标移动到“linux16... ...
- ssh 配置免密失败
多数情况下,可以登录成功.但是也会出现配置不正确,导致失败的时候. 1.检查authorized_keys文件权限,并设置为700 chmod 700 authorized_keys 2.检查/etc ...
- explain 类型分析
all 全表扫描 ☆ index 索引全扫描 ☆☆ range 索引范围扫描,常用语<,<=,>=,between等操作 ☆☆☆ ref 使用非唯一索引扫描或唯一索引前缀扫描,返回单 ...