html - 如何指示有更多文本要滚动？

Question

我正在制作一个网页并且有很多文本，所以我制作了一个文本框，您可以使用 Overflow: auto 滚动它。我的问题是我怎样才能更清楚地表明您可以滚动查看更多内容？目前，如果您不知道还有更多文本，您可能不会滚动，所以我在考虑添加一个小箭头作为滚动条，我可以仅使用 CSS 和 HTML 来实现吗？

.container {
  width: auto;
  left: 25%;
  height: 60%;
  overflow: auto;
}
.text-box {
  position: absolute;
  top: 20%;
  width: 50%;
  overflow: auto;
  height: 70%;
}

<div class="container">
  <div class="text-box">
    <h2 class="">I servizi per l'editoria scolastica</h2>
    <p>
      <h4>Progettazione e supporto alla progettazione di testi scolastici e universitari:</h4>
      <ul>
        <li>elaborazione di progetti editoriali e collane
          <li>consulenza e supervisione didattica
            <li>stesura apparati operativi
              <li>supporto e consulenza agli autori</ul>

      <h4>Progettazione grafica</h4>
      <ul>Analisi progetto editoriale e confronto con i prodotti della concorrenza; individuazione dei contenuti chiave del testo in funzione della creazione di una veste grafica coerente e valorizzante; gerarchizzazione degli elementi di decodifica e creazione
        del format grafico; ideazione copertina; supervisione tecnico-artistica della produzione</ul>

      <h4>Redazione e impaginazione</h4>
      <ul>
        <li>coordinamento degli autori e degli eventuali fornitori tecnici (grafici, fotocompositori, fotostilisti), gestione della tempistica delle consegne in affiancamento all'ufficio tecnico della casa editrice
          <li>stesura di testi: didscalie, schede, esercizi
            <li>reperimento apparati (es. fonti storiografiche, brani antologici, ecc.)
              <li>editing e revisione dei testi (contenuti e registro dell'esposizione)
                <li>redazione e impaginazione
                  <li>assistenza alla produzione</ul>
      <h4>Ricerca iconografica</h4>
      <h4>Reperimento e coordinamento illustratori</h4>
      <h4>Progettzione e gestione dei contenuti di materiali on-line, multimediali per PC e per LIM</h4>
    </p>
  </div>
</div>
</div>

Answer 1

我会添加一个 inset box-shadow 因为它很吸引人。对此的回答纯属主观。但是你可以尝试添加这个 -

.text-box {
  box-shadow: inset 0 -25px 50px -35px rgba(0, 0, 0, 1);
}