一·拾色器无法正常显示
- 问题：xxx项目里，有一个需求是将多排多列的背景地图弹窗改为多排单列的。而背景地图显示时，使用了一个g-scroll的滚动条组件，其使用了overflow：hidden，所以在改动时，地图的拾色器无法正常显示
- 第一次解决：对g-scroll的滚动条组件条件性的使用overflow：hidden
:scrollstyle="showColorPicker?'overflow:visible':'overflow:hidden'"
- 解决情况：条件性的使用overflow：hidden之后，拾色器正常显示，但是出现了地图超出部分未被隐藏的问题
-
初步认为原因是固定定位的元素 是相对于其具有定位的父节点offsetParent（relative， absolute， fixed） 进行定位的，而父元素没有脱离文档流，所以未被隐藏
-
第二次解决：修改父元素相对定位为绝对元素或去除相对定位
-
解决情况：修改父元素相对定位为绝对元素之后，出现了新的问题，地图都不显示，只显示一个名字，因为父元素改用绝对定位，脱离了文档流；但是去除相对定位，没有任何改变
-
最后的解决办法：将拾色器独立于地图列表，与之为兄弟节点，然后使用定位，至此修改完成
二·实现垂直居中时，滚动条不显示了
- 需求：垂直居中的同时，滚动条依旧显示
- 代码如下，之后滚动条不显示
position: absolute;
width:100px;
height: 50px;
top:50%;
left:50%;
margin-left:-50px;
margin-top:-25px;
- 原因：使用该方法居中时，需要知道父盒子的高度，给父盒子高度之后，因为有了高度，滚动条不显示
- 解决方法：
position: absolute;
top:50%;
left:50%;
width:100%;
transform:translate(-50%,-50%);
text-align: center;
- 垂直居中的方法：www.cnblogs.com/hutuzhu/p/4…
后续补充
