在chrome浏览器中，元素absolute/relative定位的一个BUG

最新推荐文章于 2022-04-21 10:39:03 发布

iteye_3224

最新推荐文章于 2022-04-21 10:39:03 发布

阅读量691

点赞数

前几日，用EXT的一个组件的API（setAutoScroll）设置容器滚动条属性（overflow）发现的这个问题。

问题描述如下：··可能描述得有点乱，觉得描述有点糊涂的，可以直接复制代码自己操作下就很容易明白了。~~

我们知道可以通过JS设置元素的overflow属性来设置是否显示滚动条，取值有auto, hidden, visible,scroll, 默认值是visible.

在chrme下，如果一个设置了position（fixed/absolute/relative）的父容器包含一个子元素，而这个子元素也设置了position(absolute/relative)，通过JS动态改变子元素的大小以超过父容器的可见尺寸，同时设置父元素的overflow属性为auto或scroll，这个时候出现滚动条，可以用鼠标滚动查看滚动条的部分。

接着，用JS设置父容器的overflow为""/"visible"/，这个时候，滚动条消失了，但是你滚动鼠标滚轮，会发现依然可以滚动子元素。经过测试，在chrome和Safari下都会出现这个问题，应该是webkit内核问题-。。

设置为“hidden”的话是不会出现这个问题的，或者用JS设置为""，而在样式表中设置为hidden也可以。

示例代码如下：

<!DOCTYPE html>
<head>
<script>
window.onload = function(){
  document.getElementById("t1").onclick = function(){
	var ctn = document.getElementById("ctn");
	var c = document.getElementById("ctnChild");
	ctn.style.overflow = "auto";
	c.style.height = "600px";
  };
  document.getElementById("t2").onclick = function(){
		var c = document.getElementById("ctnChild");
		var ctn = document.getElementById("ctn");
	//	c.style.height = "700px";  //可以对比下，当子元素比容器大的时候出现的情况，会发现依然可以滚动元素
		c.style.height = "200px";
		ctn.style.overflow = ""; //delete ctn.style.overflow; 用这句代替ctn.style.overflow = ""不会出现问题
  };
};
</script>
<style>
#ctn{
border:2px solid red;
 width:500px; 
 height:400px;
 position:relative;
}

#ctnChild{
background-color:blue;
width:200px;
height:200px;
position:relative;
}
</style>
</head>
<body>
<div id="ctn">
<div id="ctnChild"></div>
</div>
<input type="button" id="t1"  value="放大尺寸" />
<input type="button" id="t2"  value="还原" />
</body>
</html>

点击放大尺寸按钮，再点击还原，再前后滚动滚轮，你就懂了。