今天代码提上去后,在测试人员给我返回了消息:上传图片的弹窗里添加很多附件时会有出框的问题。我尼玛?作为一个Java开发人员不能忍,什么鬼,什么问题都给我。前端人员呢!!!转眼一想,公司没有配置纯前端人员,好吧,自己动手改,好歹当年我也学过几天css和html之类的呢。
一开始想到了还几种解决方法。
一、限制上传图片的张数,我们系统本是限制一次可上传最多二十张,我想给他限制成十张,这样也不会有显示的问题了吧。后来发现,JS提示的代码太深,还是js.min形式的没有任何格式可言,鉴于复杂,抛弃了这种想法。
二、直接将弹出层的style属性中的height属性去掉了,之前它是限制了500px。去掉后发现它可以随着图片的数量自动拉伸,二十张图片刚刚拉伸至满屏,感觉方法不错,心中暗暗窃喜。这种方法虽然好,但是有局限性啊。万一图片增多了,岂不是拉伸的不成样子了。而且方式有点简单粗暴、不太美观。
三、后来想起可不可以滚动呢,查文档。看到了overflow-x 这个属性,最后还是限制弹出层的height为500px,只是追加了overflow-x 为auto,问题完美解决。
下面说说overflow-x 的具体用法
overflow-y属性指定如果它溢出了元素的内容区是否剪辑顶部/底部边缘内容。
默认值: | visible |
---|---|
继承: | no |
版本: | CSS3 |
JavaScript 语法: | object.style.overflowY="scroll" |
语法
overflow-y: visible|hidden|scroll|auto|no-display|no-content;
值 | 描述 |
---|---|
visible | 不裁剪内容,可能会显示在内容框之外。 |
hidden | 裁剪内容 - 不提供滚动机制。 |
scroll | 裁剪内容 - 提供滚动机制。 |
auto | 如果溢出框,则应该提供滚动机制。 |
no-display | 如果内容不适合内容框,则删除整个框。 |
no-content | 如果内容不适合内容框,则隐藏整个内容。 |