JS实现滚动栏的效果

实现效果

HTML

 <!-- 滚动条特效S -->
      <div class="gd_box" id="gd_box">
        <h1>滚动效果</h1>
        <div class="content" id="content">
          1、弄堂的秋天没有枫叶bai成行的美景，却du有着独特的秋色。西风扫过，梧桐树冠抖几下zhi，灿灿的叶儿盘旋着落地，地上顿时有了一地碎金。
          　　2、好想和你一起去旅行！如果可以，在秋天，在临近黄昏的时候，与你走在这样的一条小路上，听落叶倾诉对秋风的深情，听云朵表白对蓝天的爱恋，而我，会用浅浅的笑意，去聆听你俯在我耳畔的私语。那些落叶，静静的，就好像守候着一程秘而不宣的心事，让我们，在时间无涯的荒野里，在相携相依的岁月里，可以缓缓老去。
          　　3、同样的秋天，同样的落叶，同样的旋律，却再也找不到曾经的熟悉……捡起一片似曾相识的落叶，想来它也该是经历了一世的风风雨雨……
          　　4、秋天，树叶渐渐的黄了，枯了，快要脱落了，尽管树妈妈每一年都会经历这样子的场景，可对自己的孩子总是那么依依不舍。
          　　5、秋天多么哀伤的字眼，它总是给我一种淡淡的无赖，就如同我对你的爱一样，它那么的近，又那么的远，好像已经来了，又好像还在路上，对于渴望它的人来说这总是显得有点无情，就如同你对我一样。
          　　6、弄堂秋天的中午，人们也不午睡，惬意地打个哈欠都充斥着幸福的味道。孩子们偶尔拿着串糖葫芦，偶尔拿着个吹糖人，边唱着歌谣，边在弄堂里跑，没有夏天流汗的担忧，也没有冬天厚重衣物的烦恼。
          　　7、多么陶醉秋天，秋天至此不远，一伸手，犹能触摸到余温，再伸手，已涣散。那时，你尚有一丝绿意，盈盈的，透着一线生机，没想到，在我一个回首，你却淹没在风霜里。许是红尘再也经受不起打击，不然，为什么月亮缺多圆少，而又在月圆之时喜欢风飘雨？许是人生不应该太完美，以至于有了别离。
          　　8、秋天总是给人一种莫名的惆怅。眼看着树梢枝头的叶子一点一点慢慢地泛黄，轻轻的一阵秋风吹过，有点儿枯黄的树叶就被摇下了树枝，在空中几经挣扎盘旋，最终还是无力的摇摇摆摆很是不甘心的垂落了下来，落在地上又再次被风卷起吹得满地乱串，很有一种悲秋伤离别的感觉。
          　　9、秋天是温柔的，就像母亲哺育抚养着自己的儿女。秋天是多情的，如少女那盈盈清澈的眼睛。明净的秋月更是多情，皎洁的月色铺撒开来，给大地披上一层薄纱，透出梦幻般的美。
          　　10、落叶无言，温暖如昔，这个秋天因为有你，真的很美。如果时光可以折叠，我希望可以将彼此折叠，沉睡在有你，有我的时光里。让爱如墨香，念如水。筝一弦恬淡心曲，懂你眉间爱意。歌一曲不离不弃，懂你眼神情牵。爱在深秋，无语缱绻。
        </div>
        <div class="scroll">
          <div class="bar" id="bar"></div>
        </div>
      </div>
      <!-- 滚动条特效E -->

CSS

/* 滚动条特效S */
.gd_box {
  width: 300px;
  height: 500px;
  border: 1px solid pink;
  margin: 100px;
  position: relative;
  padding: 10px;
}

.gd_box h1 {
  color: pink;
}

.content {
  padding: 5px 18px 5px 18px;
  position: absolute;
}

.scroll {
  width: 18px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  background-color: rgb(207, 201, 201);
}

.bar {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: pink;
  border-radius: 10px 5px;
  cursor: pointer;
}

/* 滚动条特效E */

JS

// 滚动条特效S
// 按照比例设置滚动条高度，bar/侧边栏=显示出的内容高度/内容的整题高度,bar/box=box/content
var box = document.getElementById("gd_box");
var content = document.getElementById("content");
var bar = document.getElementById("bar");
// 判断内容多少来选择是否删去滚动条
if (content.offsetHeight > box.offsetHeight) {
    bar.style.height = box.offsetHeight / content.offsetHeight * box.offsetHeight + "px";
} else {
    bar.style.height = 0;
}
// 鼠标移动时可以让bar跟着鼠标走
bar.onmousedown = function (event) {
    // 获取鼠标在页面的位置
    var event = event || window.event;
    var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
    var barBoxY = pageY - box.offsetTop - bar.offsetTop;
    document.onmousemove = function (event) {
        // 让bar跟着鼠标在盒子中走,得到鼠标在页面的坐标,鼠标在盒子的坐标
        var event = event || window.event;
        var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
        var boxY = pageY - box.offsetTop;
        var barY = boxY - barBoxY;
        if (barY < 0) {
            barY = 0
        }
        if (barY > box.offsetHeight - bar.offsetHeight) {
            barY = box.offsetHeight - bar.offsetHeight;
        }
        bar.style.top = barY + "px";
        // 清除选中文字
        window.getSelection ? window.getSelection().removeAllRanges() : document.Selection.empty();
        // 按比例移动内容
        // 内容移动距离/bar当前移动的距离=内容能移动的总距离/bar能移动的总距离
        var rate = (content.offsetHeight - box.offsetHeight) / (box.offsetHeight - bar.offsetHeight);
        content.style.top = -rate * barY + "px";
    };
};
// 鼠标弹起则不再跟着走
document.onmouseup = function () {
    document.onmousemove = null;
}
// 滚动条特效E