需求:当前页面是信息列表,所以高度由内容自动填充,

所以页面可以上下滑动,加载更多,

但是下发物料一栏又为一个列表

所以做了一个弹窗框,因为是列表所以高度自然又是不可控的,所以给了一个最大高度,当超出以后可滑动,即overflow:scroll,

此时就遇到了问题,当我弹窗信息过多,需要滑动时,弹窗滑动,下面的body也会跟着滑动,所以此时必须要解决body滑动的问题。

然后就开始在scroll上做文章,监听scroll,动态给body添加overflow:hidden的属性,当关闭的时候再把该属性清除掉,

想的非常美,可是有遇到问题了,ul的高度大于我设定的最大高度时body可以添加上overflow:hidden的属性,可当ul的高度小于最大高度呢,此时的并没有触发scroll方法,

然后就各种想办法,想要得到弹窗的坐标,再得到当前点击的坐标判断是否在弹窗区域内,当在弹窗区域内不就可以触发了呗,搞了半天,结果突然醍醐灌顶,

发现一个大问题,我为什么不能在刚开始触发弹窗的时候就给body添加overflow:hidden的属性呢,不管此时的ul的高度时多少,body都是不能再滑动的,于是,终于大功告成。

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

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

    当第一次写这个问题的时候,并不知道竟然还会写2,而且(1)也并没有解决问题. 也发现,这个问题,真实也困住了很多人,找到了张鑫旭(http://www.zhangxinxu.com/wordpress ...

  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. 【mac环境】终端配色 & 配置使用ll命令

    1.MAC OS X 命令终端的颜色显示 打开 terminal 会发现 ls 和 grep 后的结果是没有色彩的,这时候可以这么干: 用 vim 打开文件 ~/.bash_profile,然后把下边 ...

  2. 写jsp文件时需要注意的一些小细节

    ①jsp文件的最开始的部分: <%@ page language="java" contentType="text/html; charset=UTF-8" ...

  3. jdbcTemplate的简单介绍

    Spring JDBC抽象框架core包提供了JDBC模板类,其中JdbcTemplate是core包的核心类,所以其他模板类都是基于它封装完成的,JDBC模板类是第一种工作模式. JdbcTempl ...

  4. Java Token的原理和生成使用机制

    在此之前我们先了解一下什么是Cookie.Session.Token 1.什么是Cookie? cookie指的就是浏览器里面能永久存储数据的一种数据存储功能.cookie由服务器生成,发送给浏览器, ...

  5. concurrent.futures模块(进程池/线程池)

    需要注意一下不能无限的开进程,不能无限的开线程最常用的就是开进程池,开线程池.其中回调函数非常重要回调函数其实可以作为一种编程思想,谁好了谁就去掉 只要你用并发,就会有锁的问题,但是你不能一直去自己加 ...

  6. [JAVA]JAVA章2 IOC与AOP是啥

    使用Spring框架的过程中,其实就是为了使用IOC(依赖注入),和AOP(面向切面编程),这两个是Spring的灵魂. 主要用到的设计模式有工厂模式和代理模式. IOC就是典型的工厂模式,通过ses ...

  7. SQL里执行CLR c#代码

    这里只说一个重点: 1.直接在sql里执行clr代码的时候,sql还是会报错 说没有启用 clr 执行以下代码才会起作用 EXEC sp_configure 'clr enabled', 1;  RE ...

  8. background-clip 和 background-origin 的区别

    background-origin:指定绘制背景图片的起点. background-clip:是对背景图片的剪裁,指定背景图片的显示范围. 1.background-origin:padding  | ...

  9. python_day13_js

    JavaScript 基础 目录: javascript简介 javascrip历史 ecmascript标准 javascrip基础 js引入方式 js变量.常量.标识符 js数据类型 运算符 流程 ...

  10. ibatis (六) dynamic的用法

    view plain copy print? dynamic可以去除第一个prepend="and"中的字符(这里为and),从而可以帮助你实现一些很实用的功能.具体情况如下: 1 ...