Question

您可以在此处看到我遇到的问题：https://jsfiddle.net/xa6b8qmm/

我正在使用overflow: hidden，因为我想要隐藏滚动条

然而，这隐藏了左边和右边的正确的元素阴影。

我找不到隐藏滚动条的方法，同时允许box-shadow属性的左/右侧可见。

有什么想法吗？

CSS：

.noscrollbar {
    position: relative;
    float: left;
    height: 300px;
    width: 500px;
    overflow: hidden;
}

.scroller {
    position: relative;
    float: left;
    height: 100%;
    width: 100%;
    overflow: auto;
    padding-right: 60px;
}

.scroller div {
    float: left;
    width: 100%;
    height: 50px;
    margin-bottom: 20px;
    background-color: blue;
    box-shadow: 1px 1px 10px 1px black;
}
.scroller div:nth-child(1) {
    margin-top: 20px;
}

HTML：

<div class="noscrollbar">
    <div class="scroller">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

Answer 1

也许你可以尝试这样

.scroller div {
    float: left;
    width: calc(100% - 10px);
    height: 50px;
    margin:0 5px 20px;
    background-color: blue;
    box-shadow: 1px 1px 10px 1px black;
}

保证金：右上角;

宽度：计算宽度 - 边距+填充;

当父元素隐藏溢出时，显示子元素的box-shadow？

1 个答案: