Question

我尝试构建一个下拉组件。（使用自定义组件）。

组件模板（孩子）：

<input-box icon=right>
<ic-on art="save"></ic-on>
</input-box>
<scroll-bar>
    <list-items mode="custom">
        <div class="list-item" value="${data.value}">
            <span>${data.label}</span> 
        </div>
    </list-items>
</scroll-bar>

当组件获得属性[open]时，滚动条元素应该展开。

所以我设置了一些样式：

drop-box scroll-bar {
  position:absolute;
  left:0px;
  top : 100%;
  z-index: 100;
}

drop-box:not([open]) scroll-bar {
  max-height : 0;
  transition: max-height 0.15s ease-out;
}

drop-box[open] scroll-bar {
  max-height: 500px;
  transition: max-height 0.15s ease-in;
}

list-items元素的高度为88px，但滚动条保持为0。

当我删除top : 100%时，滚动条会变高，但位置错误。

我正在搜索互联网，现在安静了一段时间尝试了很多，仍然没有找到解决方案。

任何想法？

帮助将大大降低。

Answer 1

尝试在 drop-box滚动条中使用此代替当前样式代码：

drop-box scroll-bar {
  position: absolute;
  left:0;
  top: 0;
  height: 100%;
  z-index: 100;
}

但是你可以添加带有css属性的滚动条：

element{
    overflow: scroll;
}

element::-webkit-scrollbar {
    width: 1em;
}

element::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

element::-webkit-scrollbar-thumb {
    background-color: darkgrey;
    outline: 1px solid slategrey;
}

〜儒略

“top：100％”元素的高度为“0”？

1 个答案: