所有 4 侧的蒙版图像褪色边缘，滚动条偏移

Question

试图弄清楚这一点。

我在一个可滚动（双轴）div 中有一个段落，上面有一个遮罩，顶部和底部边缘逐渐消失。但是，我还需要淡出左右边缘。滚动条右侧有一个掩码偏移量，同样的应该在底部。

这是代码：

.visible {
  height: 10rem;
  width: 20rem;
  overflow: auto;
  padding: 1.125rem;
}

.masked-overflow {
  --mask-image-content: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent 100%);
  --mask-size-content: calc(100% - 1.0625rem) 100%;
  --mask-image-scrollbar: linear-gradient(black, black);
  --mask-size-scrollbar: 1.0625rem 100%;
  -webkit-mask-image: var(--mask-image-content), var(--mask-image-scrollbar);
  -webkit-mask-size: var(--mask-size-content), var(--mask-size-scrollbar);
  -webkit-mask-position: 0 0, 100% 0;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-image: var(--mask-image-content), var(--mask-image-scrollbar);
  mask-size: var(--mask-size-content), var(--mask-size-scrollbar);
  mask-position: 0 0, 100% 0;
  mask-repeat: no-repeat, no-repeat;
}

p {
  width: 30rem;
  font-size: 1rem;
  margin-bottom: 1rem;
}

<div class="visible masked-overflow">
  <p class="product-description">Lorem ipsum dolor sit amet, consectetur adipisicing 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. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed qu</p>
</div>

我试图添加第二个面具，但只需要其中一个。还试图问 AI，但没有帮我解决这个问题。 This post 类似，但滚动条没有偏移。

Answer 1

使用多个蒙版会很棘手，所以这里有一个想法，我将添加一个额外的包装纸以保持蒙版简单

.visible {
  height: 10rem;
  width: 20rem;
}
.visible > div {
  height: 100%;
  width: 100%;
  padding: 1.125rem;
  box-sizing: border-box;
  overflow: auto;
}
.masked-overflow,
.masked-overflow > div{
  --s: 14px; /* scrollbar size */
  -webkit-mask: 
    conic-gradient(at bottom var(--s) right var(--s) ,#000 75%,#0000 0),
    linear-gradient(to var(--d,top) ,#0000 ,#000 20% 80%,#0000) no-repeat
     0 0/calc(100% - var(--s)) calc(100% - var(--s));
}
.masked-overflow > div {
  --d: right;
}
p {
  width: 30rem;
  font-size: 1rem;
  margin-bottom: 1rem;
}

<div class="visible masked-overflow">
 <div>
  <p class="product-description">Lorem ipsum dolor sit amet, consectetur adipisicing 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. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed qu</p>
  <div>
</div>