css中overflow-x:scroll和overflow-y:visible不能同时生效的问题

起因:

工作中遇到需要overflow-x:scroll和overflow-y:visible同时生效的问题

原因:

W3C的解释:
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会进行同步设置,无法分开设置其中一个

方法1:css里面加上

padding: 500px 0;
margin: -500px 0;

这种方法对于overflow-x:hidden和overflow-y:visible是没问题的,但是我需要横向滚动条,这种方法会导致滚动条被padding:500px给顶下去,故该方法无法使用

方法2:

Popping Out of Hidden Overflow | CSS-Tricks - CSS-Trickshttps://css-tricks.com/popping-hidden-overflow/