拖動滾動條功能可以參考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>