解决jquery的scrollTop()置顶的浏览器兼容
解决jquery的scrollTop()置顶的浏览器兼容
飞吧_回家 发表于2年前
解决jquery的scrollTop()置顶的浏览器兼容
  • 发表于 2年前
  • 阅读 59
  • 收藏 0
  • 点赞 0
  • 评论 0

【腾讯云】如何购买服务器最划算?>>>   

摘要: 对于前端开发者来说,浏览器兼容是经常会遇到的问题,在不同的项目中经常会遇到不同的弹出层操作,比如登录的弹出层,需要在屏幕的中间出现,同时还要隐藏垂直滚动条。此时就需要使用jquery脚本来进行控制,是的弹出层可以在最上面的屏幕中间显示。

对于前端开发者来说,浏览器兼容是经常会遇到的问题,在不同的项目中经常会遇到不同的弹出层操作,比如登录的弹出层,需要在屏幕的中间出现,同时还要隐藏垂直滚动条。此时就需要使用jquery脚本来进行控制,是的弹出层可以在最上面的屏幕中间显示。

输入图片说明 因此,需要使用jquery的scrollTop()函数使滚动条置顶然后隐藏滚动条,显示出弹出层即可。具体的实现代码如下:

$("body").scrollTop(0);
$("body").css("overflow","hidden");

经测试,只有这两句在ie内核和火狐内核的浏览器中是不能够正常的滚动置顶的。因此需要进行完善该代码,具体的兼容实现代码如下:

$("body").scrollTop(0);
$("body").css("overflow","hidden");
$("html").scrollTop(0);
$("html").css("overflow","hidden");
$(document).scrollTop(0);
$(document).css("overflow","hidden");

通过上面的四句补充代码,即可实现各个浏览器的兼容问题,有其他好的方法欢迎大神相互交流和留言沟通

共有 人打赏支持
粉丝 3
博文 12
码字总数 6526
×
飞吧_回家
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: