发表于: 2019-07-18 20:27:53

1 855


昨天轮番图出了个问题,因为一直不知道问题出在哪,等我解决了都已经12点多了,日报都没来得及写。开始刚写完轮番图时页面还是正常的

但是当我继续往下写右侧出现了向下的滚动条时出现了一个问题轮番图不知道为啥多出来一块找了一个多小时的问题最后看了好几遍我写的代码发现我的轮番图设置的单位都是vw,,开始时显示是正常的,但是当我继续往下写页面height变大有了向下的滚动条时轮番图就会多出来一块,,这是因为vw是屏幕的百分比,100vw是屏幕宽度的100%,但是当滚动条出现时占了一点的位置,但是100vw是屏幕的宽度是不能被遮盖的所以就会多出来一块轮番图多出的部分和滚动条的宽度刚好一样。知道了问题后开始想解决办法,首先我把轮番图的父元素盒子换成%,,结果发现多出的一块没了,但是图片轮番时出了问题,可以发现前面的图片在滚动时并没有完全滚动完,还残留一块,这是因为父元素虽然是100%但是图片还是100vw,100vw要比100%长,轮番没滚动完的就是长的一块。然后我把图片也设置为%但是图片变得特别的大

看了半天才发现img时tu的子元素tu设置的为width300%,img设置为width100%,所以一张图的宽度跟yu一样宽,后来我把img设置成33%

情况好了很多,最后我把图片width设置成33.33333%算是解决了。后来我又想到了一个办法overflow: hidden;这个属性可以消除超出元素范围的部分,我看到轮番图在main这个元素里,我直接设置main这个元素overflowhidden不就可以了吗,最后试了下果然可以。之后看了师兄的代码,发现师兄也是用vw写的,但是不知道为啥没有出现这个问题。



返回列表 返回列表
评论

    分享到