前言
五年前端开发,心态一直认为没有搞不定的css
,但今天确实有点泪奔了。这个css
我搞不定...
需求
如上的截图中,由于需要在视频上进行点线面等画图操作,则需要将
canvas
的画布设置为整个视频区域。
这就导致了问题:由于视频上覆盖了一层画布,导致video
播放器本身无法在感知到鼠标事件,便失去了视频控制栏。
尝试方案
通过查看
video
内部元素可以了解到,video控制栏的dom在其内部
如何查看shadow-root,即内部元素
- chrome中点击设置,如下图
- 勾选上下图中的选项即可查看到video的内部元素
尝试思路
将video控制栏整体下移,如下图所示的展示效果,控制栏展示在视频的下面,而不是在视频的底部。
- 给
video
设置一个padding-bottom:40px
,这样视频底部会空出一段距离; - 给控制栏整体
dom
进行向下偏移transform:translateY(-40px);
结果失败
设置偏移之后也生效了,但不解的是!!!超过视频底部的所有内容都消失了!!!滚例如滚动条。
这里神奇的地方在于:查过了上级与本身,都没有设置overflow、visibility
,并且偏移体本身的高度也没有被截取。
我把偏移体本身的dom
样式贴出来,实在找不到原因了
末尾
css
能解决这个需求,自然是最佳方案。 实在不行的话,就只有重写video控制栏
了。
为啥超出的部分会被莫名其妙的隐藏?