应用溢出-y 时移除 CSS 三角形/插入符号
发布于2021-09-14 17:59 阅读(1042) 评论(0) 点赞(15) 收藏(0)
我有一个应用了 css 三角形/插入符号的弹出框。popover 的高度是动态的，因为输出是数据驱动的，我希望它在 150px 高度后滚动。
当我应用 时overflow-y: scroll，插入符号消失。
.rad {
background-color: #5c5c5c;
color: #ffffff;
position:absolute;
z-index: 1002;
padding: 5px 0;
box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.5);
border-radius:3px;
max-height: 150px;
//overflow-y: scroll;
}
.rad:after {
display: inline-block;
position: absolute;
top: 20px;
right: -10px;
content:'';
width 0;
height:0;
border-top:10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #5c5c5c;
}
这是问题的FIDDLE。取消注释 CSS 中的 overflow-y 属性以查看问题。
所需的输出： 
具有滚动能力
解决方案
这是因为 usingoverflow-y: auto具有防止任何方向溢出的不幸副作用。据我所知，如果不将 应用于overflow不同的元素，就没有真正的方法来处理这个问题。
JSFiddle：http : //jsfiddle.net/zzLega7g/9/
在这种情况下，我添加div.content了它将作为您内容的内部包装器，并且还将保留溢出样式。
更新的 CSS：
.rad {
background-color: #5c5c5c;
color: #ffffff;
position:absolute;
z-index: 1002;
box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.5);
border-radius:3px;
}
.rad .content {
overflow-y: auto;
max-height: 150px;
padding: 5px 0;
}
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/190918/f393526290d42545732b/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力