拖动滚动条功能可以参考https://blog.csdn.net/weixin_41770018/article/details/80968384
开门，放代码！！
<!DOCTYPE html
>
<
html
>
<
head
lang=
"en"
>
<
meta
charset=
"UTF-8"
>
<
title
>自定义滚动条
</
title
>
<
script
src=
"http://libs.baidu.com/jquery/2.0.0/jquery.js"
>
<
/
script
>
<
style
>
* {
margin:
0;
padding:
0;
}
.body {
width:
400px;
height:
200px;
border:
1px
solid
#333;
margin:
auto;
box-sizing:
border-box;
position:
relative;
overflow:
hidden;
}
.text {
width:
100%;
color:
#333;
text-align:
justify;
position:
absolute;
left:
0;
top:
0;
}
.text::selection{
background:
#333;
color:
#fff;
}
.bar {
position:
absolute;
top:
0;
right:
0;
width:
10px;
height:
100%;
background:
rgba(
0,
0,
0,
0.2);
border-radius:
5px;
transition:
all
0.5s
linear
0s;
opacity:
0;
}
.bar div {
width:
100%;
height:
40px;
position:
absolute;
top:
0;
left:
0;
background:
#999;
border-radius:
5px;
}
<
/
style
>
</
head
>
<
body
>
<
div
class=
"body"
>
<
div
class=
"text"
>
本名寂墨，曾用十三， 大楚时的妖姬，其实是瑶姬弟弟梦魇上神、司幽上神和前世的自己公孙白民三人半魂的合体，雌雄同体，亦男亦女！ 美若姣姬，肤似冰雪，六界最妖娆之人，天性善良，常以本小爷本大爷自居，好吃、最爱茴香楼招牌脆皮炸鸡，贪玩、喜音律，诗赋，却不喜念书与课业。
白民之国最为美丽的公主，从小爱慕表哥司幽，后与化身男子的瑶姬有一段对食之情。 白民在表哥司幽的精心策划下，深陷这段对食之情（由于家父严加管制，白民除了表哥没什么朋友，从小较为孤独，因此思慕上了的玩伴表哥司幽，司幽长大后明白了表妹心意，却只将表妹当做妹妹看待，对她较为冷漠，因此愈加孤独，当一个不喜欢孤独却不得不孤独的女人遇上一个多愁善感，热情奔放的女人（瑶姬）之后，爱情便这样开始了。）
瑶姬 巫山神女，本名妖姬（神族女祭司，）、南柯真人（同为瑶姬和弟弟梦魇、白民三人半魂的合体，雌雄同体）、大司命、子宫柯（大司命凡人之名） 元始天尊大寿，九重天炎帝无子嗣，瑶姬扮作流落的二皇子睿辛前往。 三生三世菩提树下 三生三世菩提树下
如切如磋，如琢如磨 积石有玉，列松如翠。郎艳独绝，世无其二、朝饮木兰之堕露兮，夕餐秋菊之落英，故丰神如玉兮，倜傥出尘。肤若冰雪,衣饰华美，天生丽质，其相无双，其美无极，衣袂飘飘。 行走时环佩鸣响，行雨后身怀异香简历：佐禹治水、天妒红颜，佳人薄命，未嫁而卒坐骑：火麒麟、法器：云雨扇
元始天尊大寿，六界传炎帝无子嗣，是个笑话，炎帝本有个私生子，但他从不承认，瑶姬心疼流落在外的弟弟睿辛，为了让父亲承认在外有个弟弟睿辛，在二妹云桑的建议下，扮作弟弟睿辛前往昆仑虚祝寿，被白民的表哥司幽看到了。 司幽误以为表弟白民是断袖，便设计睿辛与表妹白民邂逅，失恋中的白民一见睿辛误终身，司幽本以为了却了一桩心愿，不想两人爱之深情之切之时，司幽突然发现，自己其实是个断袖，深爱着白民，心中各种纠结，这一切的一切，重明鸟都看在眼里，他违背当初与帝鸿的诺言，将白民其实是大公主的事实，告诉了司幽，司幽心若死灰，悔不当初，却觉得白民妹妹”有睿辛那样的好男子照顾，不再纠结，然而真相往往撕心裂肺，这个流落在外的二皇子睿辛。
女扮男装扮作睿辛的瑶姬，第一眼便看上了从小被父亲变作男子的白民，不过一直活在杀死共工害得四妹碧瑶出家的阴影中，白民一心追求，瑶姬心生爱意，两人都坠入了爱河：“她以为她爱上了命中注定的皇子，不想他却是个公主“”，不久睿辛身份暴露，白民痛苦不已，却并未放弃，她曾体会过表哥因断袖之情放弃了她的那种痛，于是一心追求瑶姬，但始终不敢说明身份。
司幽 又名，公子渊，本名宋玉，曾用名子渊、小白脸。 本为太古魔族战神，后转世做了司幽之国大皇子司幽，第三世为春秋战国的宋玉，政治家、军事家、辞赋家、肤白柔嫩，人称小白脸， 秋兰作佩、蘼芜之香 ，清高、有一定的政治抱负和改革理想，却仕途不顺
。 坐骑：穷奇、术法：焚天火、法器：凌霄剑 情感纠葛：现代社会为情感专栏作家邱亦泽，郑晓渝因未婚夫背叛陷入感情危机，闺蜜温舒雅推荐邱亦泽给她，邱亦泽因郑晓渝的感情经历渐渐爱上了她，晓渝知道后心里十分矛盾，她觉得对不起未婚夫，便约邱亦泽到酒店，想要彻底斩断情丝，却不想温舒雅……
太古时代 宋玉公子渊，太古时期魔族战神子渊，从小无父无母，被叔叔魔族领袖养大，肩负统一太古使命，被称神族克星，魔族战神，年少时出游遇上了逃出来的神族女祭司妖姬，妖姬身为女祭司，生下来便没有爱情和自由，子渊对此十分同情，妖姬一见钟情子渊，带着妖姬返回魔族，却被叔叔困起来不说，还将妖姬送回了神族，太古大神寂灭一怒之下将妖姬锁起来，子渊为了妖姬甘愿做了神族的奴隶，却三次救了从小思慕神族大皇子的寂墨，三人的爱情纠葛就此开始，寂墨成了断袖，死前说，“”子渊，你救过我三次，我还欠你两条命……若……若有来世，只求做个女子，这样，便能给你鱼水之欢。”
洪荒时期 六界建立之初，晏龙之妻梦见天幕幽幽，有彗星从宇宙灵河而来，第二日便生下个男儿，晏龙夜观星象也看见一抹幽灵从灵河而降，以为主宰幽灵之神转世，故名司幽。 晏龙和帝鸿都是帝俊之子，晏龙长大后建立晏龙之国，司幽出生后将国名改为司幽之国，国都晏龙城，帝鸿嫉妒心强，生了个女儿之后本已觉得不甘，奈何哥哥晏龙前往帝鸿国送鸡蛋，他觉得不能不如哥哥，将计就计，将女儿取名公孙白民，以女儿以男儿养大，为了遮人耳目，将帝鸿之国改命白民之国，国都定在帝鸿城。
司幽年少时同父亲前往小叔家与小白民生了感情，却只将小白民当做弟弟，小白民长大后，思慕上表哥。 九州神女赋 九州神女赋 白民被帝鸿送往昆仑虚学艺，司幽经常到昆仑虚探望表弟，却无意中发现表弟爱着自己，心里十分纠结，本想将此事说清楚，却始终不忍心伤害表妹，只是对她冷漠了许多，从小性格开朗的白民因此非常郁闷，时时独自在昆仑虚中泪流不止。
司幽对表弟冷漠之后，心有愧疚，想说清楚什么，却总是开不了口，只好暗中观察表弟，发现表弟时时为自己泪流之后，司幽陷入纠结，游历人界之时听说书之人说起一桩太古大神寂灭为了让妹妹不在思慕战神子渊，（宿命啊，司幽的前世和来世都是子渊）便给她找了个夫婿，在昆仑山下的巴邑城中，以收徒为名，替表妹暗中择婿，选上了九重天二皇子神农睿辛，不想睿辛是他大姐瑶姬所扮，促成了一段流传千古的对食之情、
灵雀 是白民之国菩提海畔的一只神雀，瑶姬与白民在方长海畔幽会之时，它正被同类欺负，白民心地善良，将她救下，灵雀因恩思慕上白民。 白民和瑶姬定情之后，白民将灵雀送上九重天，瑶姬生死劫害死了白民，灵雀心伤欲绝之下跳下天河，法力尽失，之后无法化身为人，因嫉妒瑶姬而生恨，经常在瑶姬熟睡之后飞到窗前，鸣叫不已，叫声凄凉至极，让本已缠绵于床榻的瑶姬病情加重。
灵雀的第一世为太古神族大公主寂月，从小思慕魔族战神子渊，因嫉妒得到子渊爱的女祭司妖姬而无意害死了第一世的白民，自己的哥哥寂墨。这一世爱上前世的哥哥，只因前世对不起他。 第三世灵雀为巫山神女墓的守护者，为报恩化作前世主人妖姬的模样，代替妖姬服侍楚王横，为妖姬揭开了前世之谜的线索人物。
东华 三岛十洲和碧海潮生的主人，元始天尊的徒孙，神农氏炎帝的好基友，爱慕观世音化身悲慈，后因悲慈灰飞烟灭，伤心欲绝之下隐居三岛十洲十万多年
</
div
>
<
div
class=
"bar"
>
<
div
></
div
>
</
div
>
</
div
>
</
body
>
<
script
>
// 计算滚轮停止事件，停止超过2秒 bar隐藏
let
time =
0
// 定义time++事件判断bar的隐藏和显示
let
func =
function () {
time++
if (
time ==
2) {
time =
0
$(
'.bar').
css(
'opacity',
'0')
}
}
// 启动定时器
let
interval =
setInterval(()
=> {
func()
},
1000)
// body移入事件
$(
'.body').
hover(
function () {
clearInterval(
interval)
//移入的时候清空定时器
$(
'.bar').
css(
'opacity',
'1')
},
function () {
//移出的时候开始定时器
interval =
setInterval(()
=> {
func()
},
1000)
$(
'.bar').
css(
'opacity',
'0')
})
// 文字滚动
document.
body.
onmousewheel =
function (
event) {
time =
0
$(
'.bar').
css(
'opacity',
'1')
event =
event ||
window.
event;
let
textTop =
$(
'.text').
position().
top
//记录文本的top值
let
bodyH =
$(
'.body').
height()
//文本框的高度
let
textH =
$(
'.text').
height()
//文本高度
let
barH =
$(
'.bar>div').
height()
//滚动条内部块高度
let
chazhi =
textH -
bodyH
//text的最大高度
if (
event.
deltaY >
0) {
// 往下滑动，文字应该往上走
// event.deltaY=100
textTop -=
20
}
else {
// 往下滑动，文字应该往下走
// event.deltaY=-100
textTop +=
20
}
// 判定滚动的界限
if (
textTop >
0) {
textTop =
0
}
if (-
textTop >
chazhi) {
textTop = -(
chazhi)
}
$(
'.text').
css(
'top',
textTop)
// 滚动条响应
let
bili = -
textTop / (
chazhi)
$(
'.bar>div').
css(
'top', (
bodyH -
barH) *
bili)
};
<
/
script
>
</
html
>