• 弹框内容滚动页面不滚动办法


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

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

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

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

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

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

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

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

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

  • 相关阅读:
    Linux文本处理命令
    管道和重定向
    Linux网络基本配置
    网络基础
    普通权限和特殊权限
    Linux权限
    Linux用户
    Linux帮助文档
    创建新表,自动授权trigger
    禁用约束语法测试
  • 原文地址:https://www.cnblogs.com/wangzhenyu666/p/8985382.html
Copyright © 2020-2023  润新知