多层嵌套的环境中如何快速找到滚动条的对应位置——CSS特殊场景整理

前两天代码中出现了需要调整滚动条样式的问题，对于滚动条属于哪个div还是磕了一会。特此记录

案例：

//为代码
<div 1 height = 屏幕高度>
	<div 2  height = auto>
		<div 3 height = 2*屏幕高度>
			内容
		</div>
	</div>
</div>

这种方式如果理性的进行分析，其实是可以分析出答案的～

首先我们先明确一点，什么情况下会有滚动条，就是子元素的高度（或者宽度）超出父元素的高度（或者宽度）的时候，父元素有滚动条～
对于以上嵌套的元素关系是如此，但是本质上来说，上述说法并不完全正确。

真正的理解是：元素的内容是否有溢出。滚动条的出现与元素是否溢出以及溢出的显示方式有关～

也就是overflow属性，他有四个值，visible 、 hidden 、 scroll 、 auto

但是今天并不是来解释这四个值的意思。

这个例子的前提是：内容的高度不会超过div3 的高度～

下面我们来分析：

先看结构：

div1 包裹着div 2
div2 包裹着div 3
换句话说，2是1的子元素 3是2 的子元素

由于3的内容不会超过三的高度，所以滚动条不可能是3的

再有2的高度是auto，所以3的高度是多少，2 就是多少，也不存在溢出的可能。

那么，如果滚动条可见，1的高度小于2的高度也就是3的高度，1必然会内容溢出，展示滚动条。

也就是说滚动条是属于1的。

这个问题看起来不复杂，为什么还是磕了很久呢？

因为当时，我并没有分析！！！采用了最笨的方法，删Dom !!

从内到外，当我删掉3时，发现滚动条没有了，我自然认为滚动条是2的！！

于是我改了半根本不生效！！

但其实他是属于1的，因为2的高度是auto！！

记录一下踩的坑吧 ！

当时也就是迷迷糊糊的解决了问题。