所有 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，但没有帮我解决这个问题。 这篇文章 类似，但滚动条没有偏移量。

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>