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

花花´◡`

已于 2024-02-02 19:04:55 修改

阅读量655

点赞数 11

分类专栏： web 文章标签： css html 前端

于 2024-02-02 19:02:47 首次发布

本文链接：https://blog.csdn.net/2202_75550100/article/details/135999102

版权

web 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、前言

实现功能:

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

实现逻辑：

内容布局：在<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>