前端小案例——滚动文本区域（HTML+CSS, 附源码）

一、前言

实现功能:

这个案例实现了一个具有滚动功能的文本区域，用于显示长文本内容，并且可以通过滚动条来查看完整的文本内容。

实现逻辑：

内容布局：在<body>中，使用<div>容器创建了一个类名为listen_text的区域，作为页面的主要内容容器。其中包含两个段落<p>用于展示标题和作者信息，以及一个listen_text_box的<div>用于封装实际的滚动文本区域listen_text_con。
滚动文本区域：listen_text_con类的<div>是用来展示诗歌内容的地方。通过设置overflow-y: auto;实现垂直滚动功能，当内容超出预设高度（300px）时，将显示滚动条。此外，文本对齐方式设为两端对齐，增强了文本的可读性。
自定义滚动条：通过::-webkit-scrollbar、::-webkit-scrollbar-thumb和::-webkit-scrollbar-track伪元素，分别自定义了滚动条的整体样式、滑块（thumb）样式和轨道（track）样式。这些样式提升了滚动条的视觉效果，使其与页面整体设计更加协调。

二、项目运行效果

三、全部代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>滚动文本区域</title><style>*{margin: 0;padding: 0;text-decoration: none;list-style: none;background-repeat: no-repeat;}.listen_text{width: 340px;margin: 20px auto;}.listen_text_box{width: 260px; }.listen_text_con{overflow-y: auto; height: 300px; text-align: justify;font-size: 14px; line-height: 24px; color: #a0a0a0;}.listen_text_con::-webkit-scrollbar {width: 5px;}.listen_text_con::-webkit-scrollbar-thumb {background-color: #55917a; border-radius: 5px; }.listen_text_con::-webkit-scrollbar-track {background-color: #cec5c5;border-radius: 5px;}</style>
</head>
<body><div class="listen_text"><p style="margin-bottom: 20px;font-size: 22px;line-height: 22px;color: #484848;">守灯塔人的独白</p><p style="margin-bottom: 34px;font-size: 12px;line-height: 20px;color: #838383;">作者：路易斯·塞尔努达<br>为你读诗：肖战、路知行 <br>译者：汪天艾 <br></p><div class="listen_text_box"><div class="listen_text_con">风暴又一次咆哮；半掩<br>在这摇篮的篷罩和被巾下面，<br>我的孩子依然安睡。除去<br>格雷戈里的森林和一座秃丘<br>再没有任何屏障足以阻挡<br>那起自大西洋上的掀屋大风；<br>我踱步祈祷已一个时辰，<br>因为那巨大阴影笼罩在我心上。<br>为这幼女我踱步祈祷了一个时辰，<br>耳听着海风呼啸在高塔顶，<br>在拱桥下，在泛滥的溪水上，<br>在溪上的榆树林中回荡；<br>在快乐的迷狂中幻梦<br>未来的岁月已经来到：<br>踏着狂乱的鼓点舞蹈，<br>来自大海残酷的天真。<br>愿她被人承认美丽，<br>但不至使陌生人的眼光痴迷，<br>或使自己在镜前心醉，因为<br>一旦生得过分地艳丽，<br>便会把美看作是最终的满足，<br>从而丧失天性的善良，还可能<br>失去推心置腹的莫逆交情，<br>永远也找不到一个朋友。<br>海伦命定要感到生活平淡，<br>后来因一个蠢汉惹来许多麻烦，<br>而那从浪花中升起的伟大女王，<br>因没有生父而可以自做主张，<br>却选中了一个瘸腿铁匠做男人。<br>无疑娇贵的女人们喜欢<br>吃肉时佐以古怪的生菜冷盘，<br>丰饶角因此而被糟蹋罄尽。<br>我要让她首先精通礼节；<br>心灵不可视为天赐，而是那些<br>并不十分美丽的人所挣得；<br>而许多曾为美而美的蠢货<br>已经将魅力变成了智慧，<br>还有不少曾经漫游的穷汉，<br>爱恋过并自认为曾被爱恋，<br>现在目光已离不开令人欢悦的仁爱。<br><br>愿她成为一株繁茂的绿树，<br>红雀就好象她全部的思绪，<br>没有劳形的事务，只是慷慨地<br>四处播送着它们宏亮的鸣啼，<br>只是在欢乐中相互嬉逐，<br>只是在欢乐中你吵我争。<br>呵，但愿她象月桂那样长青<br>植根在一个可爱的永恒之处。<br>近来，由于我曾喜爱的那些心意<br>和我曾赞赏的那种美丽<br>皆是昙花一现，我的心灵已枯竭，<br>但仍知一旦为仇恨所壅塞<br>才定然是最可怕的厄运。<br>假如心灵中毫无仇恨，<br>那厉风的袭击再烈再猛<br>理智的仇恨为害最甚，<br>因此教她把观念视为可憎。<br>难道我不曾眼见那诞生<br>自丰饶角之口的最美丽的女人，<br>只因她观念固执的心肠，<br>用温和的天性所了解的<br>每一种美德和那只羊角<br>换取了一只充满愤怒的旧风箱？<br>想到此，一切仇恨被驱逐散尽，<br>灵魂恢复了根本的天真，<br>终于得知那是自娱自乐，<br>自慰自安，自惊自吓，<br>它自己的美好愿望就是天意；<br>尽管每一张面孔都会恼怒，<br>每一处风源都会咆哮，或每一组<br>风箱都会胀破，但她会依然欢喜。<br>还愿她的新郎引她入洞房，<br>那里一切寻常，庄重堂皇；<br>因为傲慢和仇恨都不过<br>是大路两旁零售的杂货。<br>除了在风俗和礼仪之中，<br>纯真和美丽如何诞生？<br>礼仪是丰饶角的别名，<br>风俗是繁盛的桂树的名称。</div></div></div>
</body>
</html>