沃梦达 / IT编程 / 前端开发 / 正文

ie8 body overflow hidden 无效的解决方法

针对“ie8 body overflow hidden 无效”的问题,我们可以通过以下方法来解决:

针对“ie8 body overflow hidden 无效”的问题,我们可以通过以下方法来解决:

问题分析

首先需要分析问题,为什么设置了 bodyoverflow: hidden,在 IE8 中无效呢?这是因为 IE8 及以下版本只能对文档的根元素 html 进行滚动条的控制,而不能对 body 元素进行控制,因此 overflow: hidden 在 IE8 中无效。

解决方法

我们可以通过以下两种方法来解决这个问题:

1. 将 overflow: hidden 设置在 html

overflow: hidden 设置在 html 上即可解决该问题。示例代码如下:

html {
  overflow: hidden;
}

2. 使用 JavaScript 动态设置 body 的高度

使用 JavaScript 动态设置 body 的高度即可实现 body 的滚动条隐藏。示例代码如下:

var body = document.body;
body.style.height = '100%';
body.style.overflow = 'hidden';

使用这种方法需要注意,在设置完 body 的高度后需要再次设置回 auto,以防止其他问题的出现。示例代码如下:

var body = document.body;
body.style.height = '100%';
body.style.overflow = 'hidden';
// do something
body.style.height = 'auto';

总结

以上两种方法均可解决 IE8 下 bodyoverflow: hidden 无效的问题,需要根据具体情况选择使用哪种方式。

本文标题为:ie8 body overflow hidden 无效的解决方法