在很多场景下我们都会遇到这种情况:父元素的宽度或者高度固定,但是子元素的宽度或者高度超出了父元素的容器。这时就出现了这样一种情况,如果想要看到全部的子元素,那么我们就要在父元素上设置overflow: scroll(auto);,这时虽然可以通过滚动来看到所有的内容,但是会出现滚动条,非常不美观。
这里写图片描述

最右边的是什么啊,严重影响美观啊,不能忍。

既然overflow: scroll;会出现滚动条,那我们就设置overflow: hidden;试试看吧。
这里写图片描述

唉,滚动条消失了,我们是不是成功了呢?怎么回事?为什么滚动事件不会触发了?看来这种方法失败了。

好了,废话别多说了,直接告诉我们解决方法啊!看来,小伙伴能有点不耐烦了,好的,马上上正餐。

解决方法:首先和原来出现滚动条一样的方法设置父元素和子元素的css属性,但是我们在这个父元素的外层在套一层div,也就是由原来的 父元素–子元素 的结构变成了 祖父元素–父元素–子元素 。

这里写图片描述

变成 这里写图片描述

如果你的父元素设置的 width 是 n px,那么你需要设置最外层的祖父with 为 (n-18)px,然后设置祖父元素overflow: hidden;18px是最小值,不能比18px小,否则滚动条就能被看见了。

完美,这样美观又实用的技巧大家是否喜欢呢?这里写图片描述

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐