发布日期 » 2018年1月14日 星期日

版权声明 » 帅华君原创文章,未经允许不得转载。

CSS外边距与内边距的抗衡

长话短说,就是想实现鼠标移入时显示滚动条,鼠标移出后隐藏滚动条,参照YouTube的效果。

YouTube滚动条

从用户体验的角度来讲,这种需求非常值得点个赞,毕竟当用户的关注点不在一些可滚动容器上时,多余的色块会影响用户的注意力。

目前来讲,CSS中能使用-webkit-前缀能修改Chrome和Safari浏览器的默认滚动条样式,除此之外就要求助于一些奇技淫巧 :)

前端童鞋都知道,margin值是可以设置负值的,还不知道的童鞋可以看我之前写的这篇文章 再谈CSS中MARGIN属性对水平格式化的影响

所以,将需要把超出部分滚动显示的容器的外边距(具体上下还是左右根据滚动条的位置而定)设置一个合适的负值,问题便迎刃而解。

上图是chrome浏览器效果,(诡异的红配绿~怕你眼神不行看不清楚嘛)

上图是本例与YouTube在Firefox浏览器下的表现,一致。

上图为YouTube在Firefox浏览器上的效果,显然和chrome有不同(来自Firefox浏览器的挑衅~)