「微博客」解决“设置overflow-y: auto;后,x轴上溢出的阴影会被裁切掉”的问题

发布于 2023-06-08  266 次阅读


HTML如下:

<div class="answers">
    ${statistic[index].get("content").map((v, i) => {
        return `<div class="option"><span class="answer-label">回答${i + 1}:</span>${v}</div>`;
    }).join('')}
</div>

解决方法

在外层标签的样式中多加一定长度(X)的padding和同样大小的负的margin(具体数值根据你被裁掉的大小来确定,X是多少,就能多显示出来多少被剪裁隐藏起来的内容。)

例:

.answers {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: visible;
    white-space: nowrap;
    padding: 20px;
    margin: -20px;
    padding-top: 0;
    margin-top: 0;
}

这样的话,top正常,左右下都会显示出来原本被裁掉的阴影。

%E6%88%AA%E5%B1%8F2023-06-08%2019.27.49.png

问题出现的原因

设置overflowvisible之外的值之后,会形成块级格式化上下文(BFC),导致原本在margin上的阴影就会被裁切隐藏掉,原本是不会的。所以需要用padding占据原来margin占据的空间,阴影在padding上就不会被裁切隐藏。

相关资料


A Student on the way to full stack of Web3.