続きを読むフェードグラデーション

<div class="d06-09-08-wrap">
          <div class="d06-09-08-body">
            <h4>続きを読むと見える本文</h4>
            <p>最初は数行だけ表示され、下側がグラデーションでフェードします。ボタンを押すと全文が読めるようになります。</p>
            <p>全文表示後は内部スクロールで最後まで読み進められ、末尾に到達するとフェードが消えます。</p>
            <p>この演出は要約と全文の間の橋渡しとして、記事の第一印象を軽く保つのに役立ちます。</p>
            <p>読者の興味を引いた上で本文へ誘導できるため、離脱防止にもつながります。</p>
          </div>
          <div class="d06-09-08-fade"></div>
          <button class="d06-09-08-more" type="button">続きを読む <span class="d06-09-08-arrow">▾</span></button>
        </div>

.prev.d06-09-08{padding:0;display:block}
        .d06-09-08-wrap{position:relative;height:260px}
        .d06-09-08-body{height:132px;overflow:hidden;box-sizing:border-box;padding:16px 18px 0;font-size:12px;line-height:1.8;color:#666c80;transition:height .35s ease}
        .d06-09-08-body.is-open{height:210px;overflow-y:auto;scroll-behavior:smooth}
        .d06-09-08-body h4{margin:0 0 6px;font-size:13px;color:#242a3d}
        .d06-09-08-body p{margin:0 0 12px}
        .d06-09-08-fade{position:absolute;left:0;right:0;bottom:38px;height:60px;
          background:linear-gradient(180deg,rgba(255,255,255,0),#fff 82%);pointer-events:none;transition:opacity .3s}
        .d06-09-08-fade.is-hide{opacity:0}
        .d06-09-08-more{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);font-size:11px;font-weight:700;color:#fff;
          background:linear-gradient(135deg,#5b3df0,#9b5cf6);border:none;border-radius:16px;padding:7px 18px;cursor:pointer;
          display:flex;align-items:center;gap:4px;box-shadow:0 4px 10px rgba(91,61,240,.25)}
        .d06-09-08-arrow{transition:transform .25s}
        .d06-09-08-wrap.is-open .d06-09-08-arrow{transform:rotate(180deg)}

(function(){
        var root=document.getElementById('item-06-09-08');if(!root)return;
        var wrap=root.querySelector('.d06-09-08-wrap');
        var body=root.querySelector('.d06-09-08-body');
        var fade=root.querySelector('.d06-09-08-fade');
        var btn=root.querySelector('.d06-09-08-more');
        var open=false;
        btn.addEventListener('click',function(){
          open=!open;
          wrap.classList.toggle('is-open',open);
          body.classList.toggle('is-open',open);
          btn.firstChild.textContent=open?'閉じる ':'続きを読む ';
          if(!open){fade.classList.remove('is-hide');}
        });
        body.addEventListener('scroll',function(){
          if(!open)return;
          var max=body.scrollHeight-body.clientHeight;
          var nearEnd=max<=0||body.scrollTop>=max-6;
          fade.classList.toggle('is-hide',nearEnd);
        });
      })();