zoukankan      html  css  js  c++  java
  • 弹框内容滚动页面不滚动办法

    之前写过一篇文章,是解决弹框显示的时候, body 不允许滑动,思路大致如下:

    弹框显示时,设置 html 和 body  overflow:hidden ,并阻止浏览器的默认行为;

    弹框隐藏时,设置 html 和 body  overflow:auto ,并方法浏览器默认行为。

    但是这种办法当弹框里面的内容也需要滑动的时候,是滑动不了的,因为已经阻止了浏览器的默认滑动行为。

    后来针对这种需求的解决办法为:

    1.页面滑动时,获取外层盒子的 scrollTop ,弹框显示时设置滚动盒子 position:fixed , top 为外层盒子当前 scrollTop 

    2.取消弹框时恢复滚动盒子 position:relative;top:0; ,外层盒子赋值 scrollTop 为原来的 scrollTop 

    这样既阻止了主体内容的滚动,同时又不影响弹框内容的滚动。

    如有表述不准确之处,欢迎指正,欢迎补充,感谢阅读。

  • 相关阅读:
    Slimer软工课设日报-2016年6月30日
    Slimer软工课设日报-2016年6月29日
    软件工程个人总结
    什么是Bug
    构建之法读后感----第1章 绪论
    7.4
    7.1-7.3
    6.29
    软件工程课设 第二天
    软工总结 作业
  • 原文地址:https://www.cnblogs.com/wangzhenyu666/p/8985382.html
Copyright © 2011-2022 走看看