1. 介绍

自 IE8 以上版本的浏览器开始,overflow增加的两个属性,分别表示单独控制水平或垂直方向上的剪裁规则。属性可以设置为 visible | hidden | scroll | auto

2. 场景

  1. 需求:使用swiper的竖直排列,同时使用滚动条,即竖直方向隐藏(overflow-y: hidden),但是需要修改swiper的自定义滚动条,将其定位到wrapper外(即水平方向需要用到absolute)。
  2. 问题:原本以为使用overflow-y: hidden; overflow-x: visible; 然后再定位滚动条即可,但是发现水平方向一直是overflow: auto;的效果。
  3. 原因:

    The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’. The computed value of ‘overflow’ is equal to the computed value of ‘overflow-x’ if ‘overflow-y’ is the same; otherwise it is the pair of computed values of ‘overflow-x’ and ‘overflow-y’.

    即:当overflow-x和overflow-y其中一个为’visible’,而另外一个不为’visible’时,则’visible’会被当做’auto’。

  4. 解决:暂未解决==,想知道W3C这么处理的原因,但是没有找到相关资料,有看到几种思路,一个是父容器y轴隐藏,子容器x轴显示,但是这样父容器需要足够大,感觉应用度不是很高。

3. 参考资料

分类: 前端

发表评论

电子邮件地址不会被公开。 必填项已用*标注