我应该如何使用边框、边框半径和溢出设置元素样式：自动？

Question

我正在设计一个列表，为了与对等元素保持一致，该列表需要位于具有圆角边框的元素中。该列表可能足够高，也可能不足以导致垂直滚动条。

如果我用全圆角设置列表样式，滚动条会遮住圆角，看起来很破：

ul {
  border: 2px solid grey;
  border-radius: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 8em;
}

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

如果我删除了右侧的圆角，滚动条在出现时看起来是正确的：

ul {
  border: 2px solid grey;
  border-radius: 10px 0 0 10px;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 8em;
}

<ul>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

但这意味着当列表太短而无法滚动时，元素看起来不一致。我可以设置overflow-y:scroll 而不是自动，但我宁愿避免总是显示栏。有没有办法设置这个样式，使没有溢出的元素有圆角，但有滚动条的元素没有？ （欢迎使用其他解决方案！）

Answer 1

您可以将div 包裹在ul 元素周围。然后在div 上应用border-radius。要隐藏溢出角落的 scollbar，请对其应用 overflow: hidden。

div {
    border: 2px solid grey;
    border-radius: 10px;
    overflow: hidden;
}

ul{
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 8em;
    margin: 0;
}

<div>
    <ul>
        <li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li>
        <li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li>
    </ul>
</div>

Answer 2

这是我想出的解决方案：
如果 div 大于 150px，它会将类 rounded 添加到 ul 并且右边框不圆角。
问题是，您必须在max-height

编辑：中使用像素作为单位：我添加了一个小按钮，添加了一个列表项，因此您可以看到效果。

编辑 2： 编辑了我的笔，因此您可以使用 vh 而不是像素。只需更改var containerHeight 中的0.4 (0.4 = 40vh)

var containerHeight = $(window).height() * 0.4;

$('button').click(function(){
    $('.listContainer').append('<li>Item</li>');
    if ($('.listContainer').outerHeight() >= containerHeight) {
       $('.listContainer').addClass("notrounded");
    }
});

ul{
border: 2px solid grey;
border-radius: 10px;
overflow-x: hidden;
overflow-y: auto;
max-height: 40vh;
}
ul.notrounded{
border-radius: 10px 0 0 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="listContainer">
<li>Item</li><li>Item</li><li>Item</li>
</ul>
<button>add list item</button>

Answer 3

这是默认问题，因为滚动条总是出现在图层上方，但是您可以使用替代方法来减少此问题，即

	ul{

overflow-x: hidden;
overflow-y: auto;
max-height: 8em;
}
.border_sec{
	border: 2px solid grey;
border-radius: 10px;
}

<div class="border_sec">
<ul>
<li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li>
<li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li><li>Item</li>
</ul>
</div>