在页面中虽然可以通过CSS修改滚动条的样式,但是部分属性是无法自己修改和设置的，而且不同浏览器存在兼容问题，因此通过JS来实现滚动条在自定义滚动条的环境下也是有必要的。
接下来，我们来实现上图两种情况下滚动条的实现。
一、页面搭建
1.1 创建index.html页面
首先创建html页面，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滚动条</title>
</head>
<body>
<div class="container">
<!-- scroll-wrap -->
<div class="scroll-wrap">
<div class="content" id="scroll">
<p>文章包括各种文体的著作、作品，如诗歌、戏剧、小说、科学论文，记叙文、议论文、
说明文、应用文等等。“千古文章未尽才”“文章千古事”“文章憎命达”“板凳要坐十年冷、文章不写一字空”“积句
而成章，积章而成篇”“言出为论，下笔成章”等，都是现在所说的文章的意思。更广义的文章，也包含“学问”
“奥秘”等意思，如“洞明世事皆学问，人情练达即文章”就是。</p>
<p>“文章”的“章”字，是个会意字，从音从十。古代奏音乐，连奏十段才能结束（十，数之
终也），这十段乐就是一章。所以，文章文章，也有段落。文章既从“音乐”里会意出来，应是用文字表达出来
的东西，读起来如音乐一样美妙无穷、悦耳动听的文字，传诵开来，才配得上“文章”一词的真正含义。</p>
<br />
<h3>释义</h3>
<p>“文”即“纹”，指“纹路”、“纹样”。“章”本指“屏蔽”，转指“外表”。“文章”原义指“有纹
样的表面”，诸如服装上绣绘的龙凤图样、皮肤上针刺的花卉图案，等等。即其原义是指直接构成视觉形象的图
样。后指文字所描绘出来的事物图样，需要大脑“解码”才能完整呈现的间接的事物形象。</p>
<br />
<h3>要素</h3>
<p>文章的基本要素——主题、材料、结构、语言，是文章学的主要研究对象，以往各种写作
论著论之甚详，但对其概念内涵的揭示似欠斟酌，定义并不严格。新近出版的写作论著，或沿用旧说，或虽有改
动而仍值得商榷。本文拟从严格意义上的定义要求出发，结合有关知识，对这四个要素概念的种种“定义”质疑
问难，并试提出自己的修正意见，以就教于写作界同行。</p>
<br />
<h3>拟题中常用的修辞手法和语言技巧主要有以下九种。</h3>
<p>1、引用法就是借用俗语、名言或他人诗句等现成的语言材料来拟制标题。引用法分直接
引用和变形引用两种情况。</p>
<p>直接引用，就是把引用的语言材料不加改动地直接取来作拟题之用。如理由的《扬眉剑
出鞘》，人民日报评论员文章《铁公鸡—一毛不拔》，廖沫沙的《教然后知困》等，都属于这种形式。直接引用
比较简单，无须多说。变形引用则非常复杂，需要着重谈谈。</p>
<p>变形引用，就是把引用的语言材料经过加工改造，然后再作拟题之用。变形引用根据不
同的加工方式又可分为“反叠式”、“悖论式”、“谐变式”、“镶嵌式”等不同形式。</p>
<p>反叠式变形引用，就是利用其他文章标题、俗语等进行反面重叠，造成一种反叠式的标
题。如蒲鲁东曾写有《贫困的哲学》，马克思便利用它写了《哲学的贫困（答蒲鲁东先生的<贫困的哲学
>）》，这就是反叠式变形引用。此外，诸如《“回头浪子”帮助浪子回头》，《伯乐相马与马相伯乐》等，也都
属于这种形式。反叠式变形引用，内容上可以使标题产生新意，给人以新奇而幽默的感觉，形式上给人以对称的
美感。</p>
<p>对常见的俗语、名言进行加工改造，取其反义而用之，形成一种貌似荒谬却又隐含着十
分新颖而深刻的意义，这种引用方式叫“悖论式变形引用”。例如“班门弄斧”这句成语一般是用来讽刺那些在行
家面前卖弄本事，没有自知之明的人。而一位作者在介绍华罗庚赴美讲学的一篇文章中却拟用了《弄斧必到班
门》这样一个标题。为什么呢？因为华罗庚赴美讲学计划讲十个数学专题，为了与美国同行能在更高的层次上进
行学术交流，他决定在美国各大学所讲的专题必须是该大学科研中的长项。华罗庚戏称自己这是“弄斧必到班
门”，此文作者便取之为题。你看，这个标题与“班门弄斧”的本义正好相悖，却又含义深远，切合于文章内容。
此外，诸如《近水楼台不得月》，《曲高未必合寡》，《要有“知人善免”的勇气》等，也都属于这种形式。
</p>
<p>谐音式变形引用，就是利用语言的同音现象，将引用的俗语、名言中的个别字词加以替
换，造成一种同音异义的语言效果，这种引用方式就叫“谐音式变形引用”。例如1987年1月25日《人民日报·海
外版》登载的苏泰的文章《学而优则“侍”》，标题显然是从《论语·子张》中的“学而优则仕”一句变化而来。原
来此文主题是赞扬大学生勤工助学，放下架子，课余时间去咖啡厅为顾客服务。此外，如《以“职”论价》与俗
语“以质论价”谐音，《爱“才”如命》与成语“爱财如命”谐音，这些标题与原句虽然只是一字之差，却另出新
意，醒人耳目。</p>
<p>镶嵌式变形引用，就是利用俗语、名言、古诗词等原有的语句框架，选择一些切合于文
章内容的字词填嵌其中，使其另生新意。例如，有篇新闻报道，标题是《助人何必曾相识，精神文明谱新歌》，
其中前半句显然出自唐代诗人白居易《琵琶行》诗中的“同是天涯沦落人，相逢何必曾相识”一句，将“助人”二
字填嵌其中，便有了新的含义。又如有一篇市场调查，标题为《知否？知否？应是贱肥贵瘦》，显然，这是袭用
了宋代诗人李清照《如梦令》词中“知否？知否？应是绿肥红瘦”一句将“贱”、“贵”二字填嵌其中，也使标题陡
生新意。</p>
<p>变形引用虽然方式各异，但都能巧妙地利用俗语、名言及古诗词广泛的传播效应，给人
一种似曾相识，却又颇含新意的感受，推陈出新，为我所用，使文章标题更具魅力。</p>
<p>2、叠加法所谓“叠加法”，就是在他人文章或言论的基础上，进一步深入研究探讨，以
其相同的写作手法写成文章，其标题往往是以相同的语句叠加而成，故称“叠加法”。运用叠加法拟题最常见的
一种形式，就是利用他人有关“批评”或“批判”而拟制新的驳论性文章标题。这种标题常常拟为《关于……批评的
批评》，这种标题有时也可采用多重否定的形式，但常见的是双重否定形式。此外，诸如《关于启示的启示》，
《对于“笑话”的笑话》等，也都是采用叠加法拟题的一种形式。</p>
<p>3、对偶法就是拟题时把结构相同，字数相等的一对句子或词组排列在一起，以表达相
关、相联或相反的意思。例如《半月谈》评论员文章《尊师重教，育才兴邦》（1985年第3期），其标题就是采
用对偶法拟制的。此外，诸如《运用综合技术开拓未来世界》，《高价水泥一斤不卖计划指标一袋不少》，《卖
债券支援国家建设得奖品为您增添喜悦》等，也都是采用对偶法拟制的标题。</p>
<p>采用对偶法拟制的标题，两个句子或词组的意思彼此补充，相互映衬可将文章内容达得
更加深刻、鲜明，而且朗读起富有节奏感，能增强标题语言的艺术性。</p>
<p>4、活用动词法文学作品描写人物之所以能给人以深刻的印象，很重要的一点就是作者善
于抓住人物富有典型意义的行为动作来进行描写，只有这样才能把人物写“活”。拟制标题也可以采用文学作品
描写人物的这种方法，根据文章内容，选取具有典型意义的动态性的词句来拟制标题，着眼于一个“动”字，尽
量把题目写“活”例如，有篇文章记叙一位公共汽车女售票员，正确对待一个无理取闹往自己身上吐痰的小青
年，从而引起小青年自责的事。如果把题目拟成《售票员风格高尚，乘车人行为可耻》便很一般。而这位作者却
不同凡响，将题目拟为《冷静擦去一口痰，微笑震动一颗心》，两相比较，后者就显得格外生动感人。又如有则
通报批评某单位制定的服务措施只是挂在墙上而没有落实到行动上，标题是《让措施从墙上“走”下来》。你
看，一个“走”字，用得真是恰到好处，平字生辉。</p>
<p>5、虚实结合法这是拟制双行标题所采用的一种拟题方法。大家知道，拟单行标题，作者
既可以用平实的文字开门见山地把文章主题或主要内容直接传达给读者，直白陈事，实实在在，不需要任何修饰
和点缀；也可以采用形象、含蓄的语句拟题，使标题富有形象性和趣味性，诗情画意，引人遐思。两种方法虽各
有千秋，但不免单调，而拟双行标题则可以把这两种方法结合起来使用，使其中一行标题形象、含蓄，另一行标
题平实、明快，这就是“虚实结合法”。采用这种方法拟制的标题，其正题一般多采用富有形象性、含蓄性的语
句拟制，其作用在于揭示和突出文章的主要内容，副题则采用准确、平实的语句拟制，它对正题具有诊释和限制
的作用。例如，发表在《名作欣赏》1986年第3期上的朱炯强的文章</p>
<p>6、设迷法就是采用类似于迷语的方式，在标题中先有意设下一个“迷面”，使读者产生
悬念，诱发其想要急切解答的欲望，其“迷底”待阅读全文之后自然揭晓。例如祖慰的文章《赫赫而无名的人
生》（《文汇月刊》1987年第6期），题目起得就颇为古怪、有句成语叫“赫赫有名”，“赫赫”乃显赫的意思，用
来修饰“有名”，意思是名气很大，声名显赫。既然“赫赫”，何来“无名”？待看过文章之后方才恍然：原来这篇
文章是介绍中国导弹核潜艇的总设计师，一位人称“中国核潜艇之父”的科学家的坎坷一生。核潜艇，乃尖端高
科技产品，世界上只有极少数国家拥有，而中国已能自行设计、建造，这难道不是轰动全球的赫赫伟业？而高科
技军事武器因为是国家保密项目，参与设计、建造的科学家自然也是“无名”的，所以题目就叫“赫赫而无名的人
生”。此外，诸如《腰缠万贯的乞丐》，《从未见面的老朋友》，《一位没结婚的男“妈妈”》等，也都是采用设
迷法拟制的标题。既然“腰缠万贯”，怎么会是“乞丐”？既然是“老朋友”怎么会没见过面？“妈妈”都是女的，怎
么会出来个男的，而且又是“没结婚”的？这些标题都给读者留下了一个悬而未解的疑问，答案只有阅读了文章
之后才会知晓。</p>
<p>7、宾语前置法拟制标题常常使用动宾结构的词组或短句的形式。如恩格斯的《论权
威》，毛泽东的《论人民民主专政》，吴伯箫的《记一辆纺车》等。但有时为了使标题的形式有所变化，也可以
把其中的宾语提到动词前面，变成宾语前置的形式。如马克思的《资本论》，毛泽东的《实践论》，《矛盾
论》，薛福成的《观巴黎油画记》，蒸子的《无名礼赞》等。宾语前置式标题与原来的标题比较，只是形式不
同，内容并无变化，因此二者可以互换。</p>
<p>8、隔点法运用间隔号把标题中两三个具有某种联系的单词以并列的形式分隔开来，这种
拟题方法就叫“隔点法”。例如鲁迅的《猫·狗·鼠》，秦牧的《园林·扇画·散文》，林平的《读书·爱国·修身》
（《文汇报》1981年5月3日版）等，都属于这种形式。</p>
<p>运用隔点法拟制的标题，其单词排列整齐、匀称，能给人以美感。另外，这种标题形式
还能产生悬念，吸引读者阅读。这种标题一般多适用于杂文、随笔一类的短篇议论文。</p>
<p>9、冒号法近年来在报刊杂志上经常出现一种新的标题形式，这种标题中间都加有一个冒
号。例如庄建民的《选美：众说纷纭的话题》（《瞭望》1993年7月26日第30期），《瞭望》杂志社记者文章
《1993：在夏收第一线》（《瞭望》1993年7月19日第29期）。</p>
<p>这种标题中的冒号一般具有两个作用：一是表示前面内容是对后面内容的限制；二是表
示后面内容是对前面内容某一个方面的诊释、介绍或阐述。一般情况下，这两个作用是同兼的。如上述二例：例
一，“选美”是对“众说纷纭的话题”的限制，“众说纷纭的话</p>
<p>题”很多，“选美”只是其一；反过来，“选美”关系到的方面很多，“众说纷纭”只是对其
中一个方面的阐述。例二，“1993”是对“在夏收第一线”时间上的限制；而“在夏收第一线”则是对1993年“夏收”
这一个方面的介绍和阐述。</p>
<p>拟制冒号标题，一般总是将文字较少的名词或名词性词组放在前面，而将文字较多的动
词或名词谓语部分放在后面，如上述二例即是。</p>
<p>运用冒号法拟题，可以准确地揭示文章内容，让凑者在有限的标题文字中获取更多的内
容信息，还可以便标题形式更加多样化。这种标题形式在新闻体裁和学术文章中比较多见。</p>
</div>
</div>
<!-- /scroll-wrap -->
</div>
</body>
</html>1.2 CSS样式
页面内容添加后，再添加样式文件，创建scroll.css，代码如下：
/**
容器
*/
.container{ width: 100%; font-size: 12px; }
.container::after{ display: block; content: ''; clear: both; }
.scroll-wrap{
最低0.47元/天 解锁文章
扫一扫
344
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
