如何指示还有更多文本要滚动?

托马索·阿米奇(Tommaso Amici)

我正在制作一个网页,并且有很多文本,所以我制作了一个文本框,您可以使用滚动该文本框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>

无处

正如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/

当然,如果您不喜欢box-shadow,则只需替换类.text-box-shadow的CSS。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

向用户指示列表中还有更多项目

如何判断我还有什么要推?

如何检测表单是否还有要渲染的元素?

还有更多的DRY方法来创建React文本输入表单元素吗?

双启动问题(还有更多...)

inputText中还有更多单词

找不到主班,还有更多

Nodejs集群还有更多设置吗?

只要有更多内容要显示,Watir 就向下滚动页面

使用LIMIT查询后,如何判断是否还有更多数据?

如何使用Oracle SQL查找表中是否还有更多记录

如何在可扩展的UILabel中添加“更多”和“减少”文本指示器?

如果页面没有滚动,如何获得更多项目

除了 zip(range(len())) 之外,enumerate() 还有更多吗?

解析然后检查 R 中是否还有更多内容

“未捕获的SyntaxError:意外的令牌<”(但是,还有更多!)

还有更多的“ monadic应用程序”吗?

简单的返回函数,还有更多Pythonic吗?

检查所选记录后是否还有更多记录

捕获后是否还有更多Paypal API可以调用?

还有更多规范的javascript,console.log

是否还有更多的“引用”符号用作引号?

如何使用角度显示带有更多按钮的长文本?

我如何正确实现onBlur,我还有另一个问题要忽略吗?

一旦 Chan 中没有更多数据要处理,如何停止线程?

当只有一件事要返回时,还有什么要返回的?

如何获得指示用户试图在ViewPager中过度滚动的指示

有人可以解释我如何循环文本直到输入 EOF 字符吗?还有如何使用向量?

当有更多的图标而不是缩小它们时,如何使 Android 中的 BottomNavigationView 滚动?