我展示了一个鼠标悬停时的滚动条,它会在UI中产生 Flink 效果。谁能建议如何避免它?代码在这里
.parent {
width:100%;
max-height: 400px;
overflow-y: hidden;
}
.parent:hover {
overflow-y: scroll;
}
.table {
width: 100%;
}
<div class="parent">
<table class="table">
<tr><td>Key</td><td>Value</td></tr>
<tr><td>Key</td><td>Value</td></tr>
<tr><td>Key</td><td>Value</td></tr>
</table>
</div>
4条答案
按热度按时间8aqjt8rx1#
您有两种选择:
1.在右边添加一个与滚动条宽度相同大小的边距(我相信默认值是16px).
margin-right: 16px
。1.如果你不太关心跨浏览器兼容性,只要使用
overflow: overlay
就可以了编辑:IE死了,所以我们现在都可以很高兴#2
xtfmy6hx2#
首先,你可以添加CSS
width:
到滚动条。之后,添加到.parent{}
宽度(从100%中减去滚动条宽度)。你可以使用CSScalc();
函数来实现这一点。当你悬停父级时,添加CSS宽度100%。但是如果你想使用绝对100%的表宽度,有一个家伙通过jQuery解决了:https://stackoverflow.com/a/17380697/8660891 * 抱歉我的英语不好:)c8ib6hqw3#
如果这个表是可滚动的,那么当用户将鼠标悬停在它上面时,它的糟糕UI实践只显示它是可滚动的(触摸设备呢?)
解决这个问题和 Flink 的最好方法是完全不隐藏滚动条,就像这样:
b09cbbtk4#
使用这个技巧来解决这个问题: