滚动实现效果
代码实现思路：
根据效果可知，静态页面一共需要四个盒子，其中最大的 box 相对定位，其他的三个盒子绝对定位。接下来一些常见样式的处理。难点在于事件的绑定实现。我的思路是，首先添加拖拽事件。然后通过改变绝对定位的样式，修改运动的top值。
美化瑕疵：滚动条不和内容同步，首先根据内容与 box 的比例，和滚动条与 box 的比例得出，滚动条的clientHeight值，然后同步移动的问题，步长乘或除以比率 rate 就行了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动条</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
height: 800px;
width: 1500px;
border: 1px solid #5e5e5e;
margin: 100px auto;
position: relative;
overflow: hidden;
}
.box .content {
position: absolute;
padding: 40px 70px 40px 40px;
}
.box .content p {
line-height: 75px;
font-size: 16px;
}
.box .bar {
position: absolute;
right: 1px;
top: 0;
background-color: #ccc;
width: 35px;
height: 800px;
}
.box .bar .rightBar {
width:35px;
height: 70px;
background-color: gold;
position: absolute;
top: 0;
}
</style>
</head>
<body>
<div class="box" id = "box">
<div class="content" id = "content">
<p>在安装苹果CMS之前，要先要在你的VPS上搭建LAMP环境。所谓的LAMP指的Linux+Apache+Mysql+PHP. 其中，你的操作系统ubuntu就是Linux。Apache是http服务器，浏览器通过服务器（也就是你的VPS）上的apache提供的服务才能获取到网页资源，从而显示在你的电脑屏幕上。Mysql是数据库，你的网站（这里即是苹果CMS）动态运行时所存取的数据都是由数据库来管理的。PHP与Apache相互配合为用户提供动态的网页，我们要安装的苹果CMS就是php语言编写的，他的运行必须依赖于PHP环境。</p><p>在安装苹果CMS之前，要先要在你的VPS上搭建LAMP环境。所谓的LAMP指的Linux+Apache+Mysql+PHP. 其中，你的操作系统ubuntu就是Linux。Apache是http服务器，浏览器通过服务器（也就是你的VPS）上的apache提供的服务才能获取到网页资源，从而显示在你的电脑屏幕上。Mysql是数据库，你的网站（这里即是苹果CMS）动态运行时所存取的数据都是由数据库来管理的。PHP与Apache相互配合为用户提供动态的网页，我们要安装的苹果CMS就是php语言编写的，他的运行必须依赖于PHP环境。</p><p>在安装苹果CMS之前，要先要在你的VPS上搭建LAMP环境。所谓的LAMP指的Linux+Apache+Mysql+PHP. 其中，你的操作系统ubuntu就是Linux。Apache是http服务器，浏览器通过服务器（也就是你的VPS）上的apache提供的服务才能获取到网页资源，从而显示在你的电脑屏幕上。Mysql是数据库，你的网站（这里即是苹果CMS）动态运行时所存取的数据都是由数据库来管理的。PHP与Apache相互配合为用户提供动态的网页，我们要安装的苹果CMS就是php语言编写的，他的运行必须依赖于PHP环境。</p><p>当然，既然是检测环境，当然会有某些检查项不符合要求的情况，万一哪一项不符合要求，这里会用红色高亮的色带将其标识出来。一般检测不通过都是因为系统中缺少某些插件，很简单自行百度解决。当这一步检测全部成功后，即可点击“进行下一步”按钮，此时进入如下界面：
</p><p>在安装苹果CMS之前，要先要在你的VPS上搭建LAMP环境。所谓的LAMP指的Linux+Apache+Mysql+PHP. 其中，你的操作系统ubuntu就是Linux。Apache是http服务器，浏览器通过服务器（也就是你的VPS）上的apache提供的服务才能获取到网页资源，从而显示在你的电脑屏幕上。Mysql是数据库，你的网站（这里即是苹果CMS）动态运行时所存取的数据都是由数据库来管理的。PHP与Apache相互配合为用户提供动态的网页，我们要安装的苹果CMS就是php语言编写的，他的运行必须依赖于PHP环境。</p><p>在安装苹果CMS之前，要先要在你的VPS上搭建LAMP环境。所谓的LAMP指的Linux+Apache+Mysql+PHP. 其中，你的操作系统ubuntu就是Linux。Apache是http服务器，浏览器通过服务器（也就是你的VPS）上的apache提供的服务才能获取到网页资源，从而显示在你的电脑屏幕上。Mysql是数据库，你的网站（这里即是苹果CMS）动态运行时所存取的数据都是由数据库来管理的。PHP与Apache相互配合为用户提供动态的网页，我们要安装的苹果CMS就是php语言编写的，他的运行必须依赖于PHP环境。</p><p>在安装苹果CMS之前，要先要在你的VPS上搭建LAMP环境。所谓的LAMP指的Linux+Apache+Mysql+PHP. 其中，你的操作系统ubuntu就是Linux。Apache是http服务器，浏览器通过服务器（也就是你的VPS）上的apache提供的服务才能获取到网页资源，从而显示在你的电脑屏幕上。Mysql是数据库，你的网站（这里即是苹果CMS）动态运行时所存取的数据都是由数据库来管理的。PHP与Apache相互配合为用户提供动态的网页，我们要安装的苹果CMS就是php语言编写的，我走完了。我走完了。我走完了。</p>
</div>
<div class="bar" id = 'bar'>
<div class="rightBar" id = "rightBar"></div>
</div>
</div>
<script>
//使用 JS 得到要操作的对象,一共四个
var rightbar = document.getElementById("rightBar");
var bar = document.getElementById("bar");
var content = document.getElementById("content");
var box = document.getElementById("box");
// 计算比率rate，根据内容的多少去改变滚动条的长短。
var rate = content.clientHeight / box.clientHeight;
rightbar.style.height = bar.clientHeight/rate + "px";
console.log(rate); //输出rate是否正确
//鼠标拖拽滚动事件
rightBar.onmousedown = function(event){
detalY = event.clientY - rightBar.offsetTop;
document.onmousemove = function(event){
var y = event.clientY - detalY;
//if 语句用于滚动条在bar 盒子里滚动，不会让top产生负数bug
if(y < 0){
y = 0;
}else if(y > bar.clientHeight - rightBar.clientHeight)
{y = bar.clientHeight - rightBar.clientHeight}
//让滚动条移动
rightBar.style.top = y + "px";
//滚动条移动多少就让内容移动乘或处以倍数，保持两者同步完成
content.style.top = - (y*rate) +"px";
}
}
//鼠标离开事件
document.onmouseup = function(){
document.onmousemove = null;
}
</script>
</body>
</html>
两个小难点：
- if 语句，刚开始搞不懂浏览器的边到 box 边的距离哪去了，所以不明白
if<0的意义。
- 滚动条的同步问题。
计算比率
rate = content.clientHeight / box.clientHeight= bar.clientHeight/ rightbar.style.height
同步步长,比率大所以是乘。
content.style.top = - (y*rate) +"px";
未加overflow: hidden;观察的现象。
2019.05.25 23:28↓
二、添加 mousewheel 事件
最近刚刚学了，鼠标监听事件，趁着熟练改写一下，两个难点。
- 兼容火狐浏览器，采用二级DOM添加监听
-
onmousewheel事件event.wheelDelta的应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动条</title>
<style>
*{margin: 0;padding:0;}
body {
background-color: rgb(249, 247, 248);
height: 8888px;
}
.box {
margin: 30px auto;
box-shadow: 0 1px 10px #333;
border-radius: 5px;
width: 800px;
height: 530px;
background-color: #fff;
position: relative;
padding-bottom: 20px;
}
.box .inner {
position: relative;
overflow: hidden;
height: 500px;
width: 680px;
padding: 25px 40px 0 30px;
}
.box h3 {
text-align: center;
line-height: 40px;
padding-bottom: 18px;
}
.box .bar {
position: absolute;
right: 0;
top: 0;
height: 550px;
width: 20px;
border-radius: 5px;
background-color: #f1f1f1;
}
.box .bar .rightbar {
position: absolute;
right: 0;
width: 20px;
background-color: #c1c1c1;
border-radius: 3px;
}
.box .content {
position: absolute;
line-height: 30px;
}
.box .content p {
text-indent: 2em;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="inner">
<div class="content" id="content">
<h3>笑傲江湖</h3>
<p>令狐冲道：“在下复姓令狐，单名一个冲字。”那祖千秋道：“姓得好，姓得好，这名字也好！”一面说，一面从跳板走向船头。令狐冲微微一笑，心想：“我请你喝酒，便甚么都好了。”当即斟了一碗酒，递给祖千秋，道：“请喝酒！”只见他五十来岁年纪，焦黄面皮，一个酒糟鼻，双眼无神，疏疏落落的几根胡子，衣襟上一片油光，两只手伸了出来，十根手指甲中都是黑黑的污泥。他身材瘦削，却挺着个大肚子。祖千秋见令狐冲递过酒碗，却不便接，说道：“令狐兄虽有好酒，却无好器皿，可惜啊可惜。”令狐冲道：“旅途之中，只有些粗碗粗盏，祖先生将就着喝些。”祖千秋摇头道：“万万不可，万万不可。你对酒具如此马虎，于饮酒之道，显是未明其中三味。饮酒须得讲究酒具，喝甚么酒，便用甚么酒杯。喝汾酒当用玉杯，唐人有诗云：‘玉碗盛来琥珀光。’可见玉碗玉杯，能增酒色。”令狐冲道：“正是。”祖千秋指着一坛酒，说道：“这一坛关外白酒，酒味是极好的，只可惜少了一股芳冽之气，最好是用犀角杯盛之而饮，那就醇美无比，须知玉杯增酒之色，犀角杯增酒之香，古人诚不我欺。”令狐冲在洛阳听绿竹翁谈论讲解，于天下美酒的来历、气味、酿酒之道、窖藏之法，已十知八九，但对酒具一道却一窍不通，此刻听得祖千秋侃侃而谈，大有茅塞顿开之感。只听他又道：“至于饮葡萄酒嘛，当然要用夜光杯了。古人诗云：‘葡萄美酒夜光杯，欲饮琵琶马上催。’要知葡萄美酒作艳红之色，我辈须眉男儿饮之，未免豪气不足。葡萄美酒盛入夜光杯之后，酒色便与鲜血一般无异，饮酒有如饮血。岳武穆词云：‘壮志饥餐胡虏肉，笑谈渴饮匈奴血’，岂不壮哉！”令狐冲连连点头，他读书甚少，听得祖千秋引证诗词，于文义不甚了了，只是“笑谈渴饮匈奴血”一句，确是豪气干云，令人胸怀大畅。祖千秋指着一坛酒道：“至于这高粱美酒，乃是最古之酒。夏禹时仪狄作酒，禹饮而甘之，那便是高粱酒了。令狐兄，世人眼光短浅，只道大禹治水，造福后世，殊不知治水甚么的，那也罢了，大禹真正的大功，你可知道么？”</p>
<p>令狐冲和桃谷六仙齐声道：“造酒！”祖千秋道：“正是！”八人一齐大笑。祖千秋又道：“饮这高粱酒，须用青铜酒爵，始有古意。至于那米酒呢，上佳米酒，其味虽美，失之于甘，略稍淡薄，当用大斗饮之，方显气概。”令狐冲道：“在下草莽之人，不明白这酒浆和酒具之间，竟有这许多讲究。”</p>
<p>祖千秋拍着一只写着“百草美酒”字样的酒坛，说道：“这百草美酒，乃采集百草，浸入美酒，故酒气清香，如行春郊，令 人未饮先醉。饮这百草酒须用古藤杯。百年古藤雕而成杯，以饮百草酒则大增芳香之气。”令狐冲道：“百年古藤，倒是很难得 的。”祖千秋正色道：“令狐兄言之差矣，百年美酒比之百年古藤，可更为难得。你想，百年古藤，尽可求之于深山野岭，但百 年美酒，人人想饮，一饮之后，便没有了。一只古藤杯，就算饮上千次万次，还是好端端的一只古藤杯。”令狐冲道：“正是。 在下无知，承先生指教。”
</p>
<p>岳不群一直在留神听那祖千秋说话，听他言辞夸张，却又非无理，眼见桃枝仙、桃干仙等捧起了那坛百草美酒，倒得满桌淋漓，全没当是十分珍贵的美酒。岳不群虽不嗜饮，却闻到酒香扑鼻，甚是醇美，情知那确是上佳好酒，桃谷六仙如此糟蹋，未免可惜。祖千秋又道：“饮这绍兴状元红须用古瓷杯，最好是北宋瓷杯，南宋瓷杯勉强可用，但已有衰败气象，至于元瓷，则不免粗俗了。饮这坛梨花酒呢？那该当用翡翠杯。白乐天杭州春望诗云：‘红袖织绫夸柿叶，青旗沽酒趁梨花。’你想，杭州酒家卖这梨花酒，挂的是滴翠也似的青旗，映得那梨花酒分外精神，饮这梨花酒，自然也当是翡翠杯了。饮这玉露酒，当用琉璃杯。玉露酒中有如珠细泡，盛在透明的琉璃杯中而饮，方可见其佳处。”忽听得一个女子声音说道：“嘟嘟嘟，吹法螺！”说话之人正是岳灵珊，她伸着右手食指，刮自己右颊。岳不群道：“珊儿不可无理，这位祖先生说的，大有道理。”岳灵珊道：“甚么大有道理，喝几杯酒助助兴，那也罢了，成日成 晚的喝酒，又有这许多讲究，岂是英雄好汉之所为？”祖千秋摇头晃脑的道：“这位姑娘，言之差矣。汉高祖刘邦，是不是英雄？当年他若不是大醉之后剑斩白蛇，如何能成汉家几百年基业？樊哙是不是好汉？那日鸿门宴上，樊将军盾上割肉，大斗喝酒,岂非壮
士哉？”
</p>
</div>
</div>
<div class="bar" id="bar">
<div class="rightbar" id="rightBar"></div>
</div>
</div>
<script>
//使用 JS 得到要操作的对象,一共四个
var rightbar = document.getElementById("rightBar");
var bar = document.getElementById("bar");
var content = document.getElementById("content");
var box = document.getElementById("box");
//内容-盒子高度比
var rate = content.offsetHeight / box.offsetHeight;
//设置一个滑块初始高度
rightbar.style.height = bar.offsetHeight / rate + "px";
//拖拽模型
rightbar.onmousedown = function(event){
event = event || window.event;
var deltaY = event.clientY - rightbar.offsetTop;
document.onmousemove = function(event){
event = event || window.event;
//新的y值
var y = event.clientY - deltaY;
//验收
if(y < 0){
y = 0;
}else if(y > box.offsetHeight - rightbar.offsetHeight){
y = box.offsetHeight - rightbar.offsetHeight;
}
//滑块就是新的y的值
rightBar.style.top = y + "px";
//内容按比例升高
content.style.top = -y * rate + "px";
// 防止拖动的时候选中文字
return false;
}
}
document.onmouseup = function(){
document.onmousemove = null;
}
// 以下是鼠标滚轮带动页面滚动
//信号量，滑块的top值
var nowtop = 0;
var step;
function move(event){
event = event || window.event;
//阻止默认事件
if(event.preventDefault){
event.preventDefault();
}else {
event.returnValue = false;
}
//规范一下方向
if(event.wheelDelta){
var step = event.wheelDelta > 0 ? 1 : -1;
}else {
var step = event.detail > 0 ? -1 : 1;
}
//带着barB跑，当我们鼠标滚轮往下滚的时候，此时step是-1
//然后我们期望内容往上跑，滑块往下跑
nowtop -= step*10;
//验收
if(nowtop < 0){
nowtop = 0;
}else if(nowtop > box.offsetHeight - rightbar.offsetHeight){
nowtop = box.offsetHeight - rightbar.offsetHeight;
}
console.log(step);
rightBar.style.top = nowtop + "px";
content.style.top = -nowtop * rate + "px";
}
box.onmousewheel = move;
box.addEventListener("DOMMouseScroll",move,false);
</script>
</body>
</html>
三、使用 jQuery结合插件替换原生
写完就一个感觉，真爽。原生写法确实费时费力，不过写原生对于自己理解代码帮助是非常大的。拖拽插件和滚轮插件是依赖 jQuery 的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动条</title>
<style>
*{margin: 0;padding:0;}
body {
background-color: rgb(249, 247, 248);
height: 8888px;
}
.box {
margin: 30px auto;
box-shadow: 0 1px 10px #333;
border-radius: 5px;
width: 800px;
height: 530px;
background-color: #fff;
position: relative;
padding-bottom: 20px;
}
.box .inner {
position: relative;
overflow: hidden;
height: 500px;
width: 680px;
padding: 25px 40px 0 30px;
}
.box h3 {
text-align: center;
line-height: 40px;
padding-bottom: 18px;
}
.box .bar {
position: absolute;
right: 0;
top: 0;
height: 550px;
width: 20px;
border-radius: 5px;
background-color: #f1f1f1;
}
.box .bar .rightbar {
position: absolute;
right: 0;
width: 20px;
background-color: #c1c1c1;
border-radius: 3px;
}
.box .content {
position: absolute;
line-height: 30px;
}
.box .content p {
text-indent: 2em;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="inner">
<div class="content" id="content">
<h3>笑傲江湖</h3>
<p>令狐冲道：“在下复姓令狐，单名一个冲字。”那祖千秋道：“姓得好，姓得好，这名字也好！”一面说，一面从跳板走向船头。令狐冲微微一笑，心想：“我请你喝酒，便甚么都好了。”当即斟了一碗酒，递给祖千秋，道：“请喝酒！”只见他五十来岁年纪，焦黄面皮，一个酒糟鼻，双眼无神，疏疏落落的几根胡子，衣襟上一片油光，两只手伸了出来，十根手指甲中都是黑黑的污泥。他身材瘦削，却挺着个大肚子。祖千秋见令狐冲递过酒碗，却不便接，说道：“令狐兄虽有好酒，却无好器皿，可惜啊可惜。”令狐冲道：“旅途之中，只有些粗碗粗盏，祖先生将就着喝些。”祖千秋摇头道：“万万不可，万万不可。你对酒具如此马虎，于饮酒之道，显是未明其中三味。饮酒须得讲究酒具，喝甚么酒，便用甚么酒杯。喝汾酒当用玉杯，唐人有诗云：‘玉碗盛来琥珀光。’可见玉碗玉杯，能增酒色。”令狐冲道：“正是。”祖千秋指着一坛酒，说道：“这一坛关外白酒，酒味是极好的，只可惜少了一股芳冽之气，最好是用犀角杯盛之而饮，那就醇美无比，须知玉杯增酒之色，犀角杯增酒之香，古人诚不我欺。”令狐冲在洛阳听绿竹翁谈论讲解，于天下美酒的来历、气味、酿酒之道、窖藏之法，已十知八九，但对酒具一道却一窍不通，此刻听得祖千秋侃侃而谈，大有茅塞顿开之感。只听他又道：“至于饮葡萄酒嘛，当然要用夜光杯了。古人诗云：‘葡萄美酒夜光杯，欲饮琵琶马上催。’要知葡萄美酒作艳红之色，我辈须眉男儿饮之，未免豪气不足。葡萄美酒盛入夜光杯之后，酒色便与鲜血一般无异，饮酒有如饮血。岳武穆词云：‘壮志饥餐胡虏肉，笑谈渴饮匈奴血’，岂不壮哉！”令狐冲连连点头，他读书甚少，听得祖千秋引证诗词，于文义不甚了了，只是“笑谈渴饮匈奴血”一句，确是豪气干云，令人胸怀大畅。祖千秋指着一坛酒道：“至于这高粱美酒，乃是最古之酒。夏禹时仪狄作酒，禹饮而甘之，那便是高粱酒了。令狐兄，世人眼光短浅，只道大禹治水，造福后世，殊不知治水甚么的，那也罢了，大禹真正的大功，你可知道么？”</p>
<p>令狐冲和桃谷六仙齐声道：“造酒！”祖千秋道：“正是！”八人一齐大笑。祖千秋又道：“饮这高粱酒，须用青铜酒爵，始有古意。至于那米酒呢，上佳米酒，其味虽美，失之于甘，略稍淡薄，当用大斗饮之，方显气概。”令狐冲道：“在下草莽之人，不明白这酒浆和酒具之间，竟有这许多讲究。”</p>
<p>祖千秋拍着一只写着“百草美酒”字样的酒坛，说道：“这百草美酒，乃采集百草，浸入美酒，故酒气清香，如行春郊，令 人未饮先醉。饮这百草酒须用古藤杯。百年古藤雕而成杯，以饮百草酒则大增芳香之气。”令狐冲道：“百年古藤，倒是很难得 的。”祖千秋正色道：“令狐兄言之差矣，百年美酒比之百年古藤，可更为难得。你想，百年古藤，尽可求之于深山野岭，但百 年美酒，人人想饮，一饮之后，便没有了。一只古藤杯，就算饮上千次万次，还是好端端的一只古藤杯。”令狐冲道：“正是。 在下无知，承先生指教。”
</p>
<p>岳不群一直在留神听那祖千秋说话，听他言辞夸张，却又非无理，眼见桃枝仙、桃干仙等捧起了那坛百草美酒，倒得满桌淋漓，全没当是十分珍贵的美酒。岳不群虽不嗜饮，却闻到酒香扑鼻，甚是醇美，情知那确是上佳好酒，桃谷六仙如此糟蹋，未免可惜。祖千秋又道：“饮这绍兴状元红须用古瓷杯，最好是北宋瓷杯，南宋瓷杯勉强可用，但已有衰败气象，至于元瓷，则不免粗俗了。饮这坛梨花酒呢？那该当用翡翠杯。白乐天杭州春望诗云：‘红袖织绫夸柿叶，青旗沽酒趁梨花。’你想，杭州酒家卖这梨花酒，挂的是滴翠也似的青旗，映得那梨花酒分外精神，饮这梨花酒，自然也当是翡翠杯了。饮这玉露酒，当用琉璃杯。玉露酒中有如珠细泡，盛在透明的琉璃杯中而饮，方可见其佳处。”忽听得一个女子声音说道：“嘟嘟嘟，吹法螺！”说话之人正是岳灵珊，她伸着右手食指，刮自己右颊。岳不群道：“珊儿不可无理，这位祖先生说的，大有道理。”岳灵珊道：“甚么大有道理，喝几杯酒助助兴，那也罢了，成日成 晚的喝酒，又有这许多讲究，岂是英雄好汉之所为？”祖千秋摇头晃脑的道：“这位姑娘，言之差矣。汉高祖刘邦，是不是英雄？当年他若不是大醉之后剑斩白蛇，如何能成汉家几百年基业？樊哙是不是好汉？那日鸿门宴上，樊将军盾上割肉，大斗喝酒,岂非壮
士哉？”
</p>
</div>
</div>
<div class="bar" id="bar">
<div class="rightbar" id="rightBar"></div>
</div>
</div>
<script src="js/jquery-1.12.3.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.mousewheel.min.js"></script>
<script>
//内容-盒子高度比
var rate = content.offsetHeight / box.offsetHeight;
//设置一个滑块初始高度
$("#rightBar").css("height",$("#bar").outerHeight() / rate);
//拖拽模型
$("#rightBar").draggable({
"containment" : "parent",
drag : function(event,ui){
var y = ui.position.top;
$("#content").css("top",-y * rate);
}
});
// 以下是鼠标滚轮带动页面滚动
var nowtop = 0;
$("#box").mousewheel(function(event){
event.preventDefault();
nowtop -= event.deltaY * 10;
//验收
if(nowtop < 0){
nowtop = 0;
}else if(nowtop > $("#box").outerHeight() - $("#rightBar").outerHeight()){
nowtop = $("#box").outerHeight() - $("#rightBar").outerHeight();
}
$("#rightBar").css("top", nowtop);
$("#content").css("top", -nowtop * rate);
});
</script>
</body>
</html>
