• 移动端body设置overflow:hidden失效与设置之后页面会向上滚动问题


    近期在写一个多弹窗的页面时,发现当弹窗出现时底部页面会出现滚动穿透现象,因此想到当弹窗显示与隐藏时js动态控制body的overflow的属性值,即

    $("body").css("overflow","hidden");
    $("body").css("overflow","visible");

    在浏览器端调试的时候是能够达到预想中的效果,结果在移动端不管是iOS还是安卓系统都是无效的,在度娘上查看了前辈们的相关博客得知,这是移动端浏览器的一个特性,解决这个问题在网上有三种方法

    1.body加position:fixed;100%;height:100%;
    2.给要滚动的元素添加一个父级,设定高度,overflow:auto
    3.html,body{height:100%;overflow:hidden}

    我采用的是第三种方法,证实是很有效果的,但这时出现了另外的一个问题,当弹窗出现即body被禁止滚动时会先滚动到顶部,这样的话如果用户触发弹窗的事件元素位置在页面的底部,则体验非常不好,我的解决办法是:在禁止页面滚动时获取页面滚动的位置,允许页面滚动时再滚动到原来的位置

    获取页面滚动位置
    var scrollToTop=$(window).scrollTop;
    设置页面滚动位置
    $('body,html').scrollTop(scrollToTop);

      最开始的时候我用的是$('body').scrollTop(scrollToTop)设置页面滚动的位置,结果发现无效,用$('html').scrollTop(scrollToTop)是有效的,为防止意外,最终使用的如上方法

  • 相关阅读:
    WPF中ListBoxItem绑定一个UserControl的学习
    Server.Transfer和Response.Redirect的区别
    4个程序员的一天
    (转)让ADO.NET Entity Framework支持Oracle数据库
    IIS操作类
    HttpHandler与HttpModule区别
    网站性能优化的34条黄金法则
    oracle9i/10g/11g各种下载
    WCF简要介绍
    软件系统的稳定性
  • 原文地址:https://www.cnblogs.com/joyer-lee/p/9386218.html
Copyright © 2020-2023  润新知