jQuery $('body').css('overflow-y', 'auto') 在 Internet Explorer 上不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5772373/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
$('body').css('overflow-y', 'auto') doesn't work on Internet explorer
提问by Pluda
I'm trying to have diferent browser behaviours depending on window height. What I want is if user is on a netbook my script will just activate the css overflow-y to 'auto' so if content is bigger than screen user can see everything. if user is in a big screen, I want to have overflow hidden and just have my main div with overflow = 'auto', so the footer can be at bottom of screen, but content can also be viwed if bigger than screen.
我正在尝试根据窗口高度使用不同的浏览器行为。我想要的是，如果用户在上网本上，我的脚本只会将 css overflow-y 激活为“自动”，因此如果内容大于屏幕用户可以看到所有内容。如果用户在大屏幕中，我想隐藏溢出，并且只让我的主 div 带有溢出 = 'auto'，所以页脚可以位于屏幕底部，但如果大于屏幕，也可以查看内容。
posting the basic code for this, it works on big screens on mac, but on internet explorer it doesn't, either on big or small screens...
为此发布基本代码，它可以在 mac 上的大屏幕上运行，但在 Internet Explorer 上却不能，无论是在大屏幕还是小屏幕上...
what to do?
该怎么办？
Thanks for help in advance
提前感谢您的帮助
CSS
CSS
html, body {
min-width: 600px;
margin: 0;
padding: 0;
overflow: hidden;
}
#header {
position:relative; /* IE7 overflow bug */
clear:both;
float:left;
width:100%;
height: 200px;
overflow: hidden;
}
#main {
position:relative; /* IE7 overflow bug */
clear:both;
float:left;
width:100%;
overflow-x: hidden;
}
#footer {
position:relative; /* IE7 overflow bug */
clear:both;
float:left;
width:100%;
height: 100px;
overflow: hidden;
}
jQuery
jQuery
if( typeof( window.innerWidth ) == 'number' ) {
// No-IE
var screen_height = window.innerHeight;
} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
//IE 6 +
var screen_height = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
//IE 4
var screen_height = document.body.clientHeight;
}
var header_height = $('#header').height();
var footer_height = $('#footer').height();
var main_height = screen_height - header_height - footer_height;
//
if (navigator.userAgent.toLowerCase().search("iphone") > -1 || navigator.userAgent.toLowerCase().search("ipod") > -1) {
$('body').css('overflow-y', 'auto');
} else {
if(screen_height > 550) {
$('#main').css('height', main_height + 'px');
$('#main').css('overflow-y', 'auto');
} else {
$('html, body').css('overflow-y', 'auto');
}
}
回答by Pluda
$('html, body').css('overflowY', 'auto');
solves this problem.
解决了这个问题。
回答by clmarquart
Try setting it with overflowY:
尝试设置它overflowY：
$('body').css('overflowY', 'auto');
Dashes in attribute names typically don't work when set with JavaScript, especially in IE.
使用 JavaScript 设置时，属性名称中的破折号通常不起作用，尤其是在 IE 中。
Hope that works.
希望有效。
