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