Question

我正在创建一个网页而且我有相当多的文字，所以我制作了一个文本框，您可以使用Overflow: auto滚动。我的问题是我怎么能更清楚地表明你可以滚动查看更多内容？目前，如果你不知道有更多的文字，你可能不会滚动，所以我想添加一个小箭头作为一个滚动条，我可以只使用CSS和HTML？

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

我会添加inset box-shadow，因为它引人注目。回答这纯粹是主观的。但你可以尝试添加这个 -

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

Answer 2

正如Sidsec9提到的盒子阴影可能是一个好主意，但是在滚动时你还需要一些js / jquery来检测div的底部：

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

将课程添加到您的div：

  <div class="text-box text-box-shadow">

在您需要时显示或隐藏课程：

$('.text-box').scroll(function()
   {
     var div = $(this);
      if (div[0].scrollHeight - div.scrollTop() == div.height())
      {
          $('.text-box').removeClass("text-box-shadow");
      }else{
          $('.text-box').addClass("text-box-shadow");
      }
   });

小提琴：https://jsfiddle.net/om9n6nu6/

当然，如果你不喜欢盒子阴影，你只需要替换我们为类.text-box-shadow提供的CSS。

如何表示还有更多要滚动的文字？

2 个答案: