Run*_*ble 16 javascript css overflow
我有一些javascript来处理我的网站上打开模态弹出窗口,它还将元素的overflow-y属性设置<html>为hidden.在Chrome和IE中,这可以正常工作 - 滚动条隐藏,模态弹出窗口后面的页面保持在相同的滚动位置.当弹出窗口关闭时,overflow-y设置为scroll并且页面处于与之前相同的状态和位置.
但是在Firefox中,只要overflow-y更改为hidden页面滚动位置就会跳到最顶层,因此当弹出窗口关闭时,用户的视图已经改变 - 不太理想.
这个问题可以在这个问题上看到
这种行为有什么解决方案吗?
不要只使用overflow: hiddenon html,on body.我有同样的问题,但通过删除修复它html.
相反:
$('body, html').css('overflow', 'hidden');
做:
$('body').css('overflow', 'hidden');
小智 5
在检查器窗口中检查后我遇到了同样的问题,我注意到在重置 CSS 中,HTML 设置为
HTML {
overflow-y: scroll;
}
Run Code Online (Sandbox Code Playgroud)
您可以通过将其设置为来解决此问题
HTML {
overflow-y: initial;
}
Run Code Online (Sandbox Code Playgroud)
如果你不想触摸重置CSS或只是评论它
插件和代码绝对没问题
Adi*_*ngh -2
使用 body 标签代替 html。
JS 小提琴:- http://jsfiddle.net/SBLgJ/6/
JS 更改:-
$(document).ready(function() {
$('#middle a').on('click', function(e) {
e.preventDefault();
$('body').css('overflow-y', 'hidden');
});
});
Run Code Online (Sandbox Code Playgroud)
CSS 更改:-
body {
overflow-y:scroll;
}
Run Code Online (Sandbox Code Playgroud)
据报道,此类行为存在问题。(https://github.com/necolas/normalize.css/issues/71)
| 归档时间: |
|
| 查看次数: |
11254 次 |
| 最近记录: |