Question

我是CSS和HTML的新手，如果问题太简单，请原谅我。我有一个为此CSS设计的下拉列表：

.open > .dropdown-menu {
  display: block; 
  height:170px;
  border-radius: 22.5px;
  border: solid 2px #a1a1a1;
  overflow:auto;
  margin-top:-55px;
  width:-webkit-fill-available; 
}

问题在于滚动条是一个矩形，并且在拐角处它刚超出了下拉边框。如何调整滚动条使其适合下拉列表？

预先感谢

Answer 1

我建议使用以下技巧。您当然可以调整值和更改样式，但是下面显示了总体思路。技巧是使用overflow: hidden将下拉列表包装在包装器中，以便孩子的滚动条被部分隐藏。

摘要

.container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
  width: 150px;
  background: grey;
  border: 1px solid black;
}

.container:hover .dropdown-wrapper {
  display: initial;
}

.dropdown-wrapper {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  height: 250px;
  overflow: hidden;
  background: red;
  border-radius: 30px;
}


.dropdown {
  height: 100%;
  overflow-y: scroll;
  padding: 20px;
  box-sizing: border-box;
}

<div class="container">
  Hover me
  <div class="dropdown-wrapper">
    <div class="dropdown">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
</div>

圆角倒圆时如何调整下拉列表中的滚动条？

1 个答案:

摘要