<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {margin: 0;padding: 0;}
.box {
width: 300px;
height: 500px;
border: 1px solid red;
margin: 100px;
position: relative;
overflow: hidden;
/* 不让文字被选中 */
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
.content {
padding: 5px 18px 5px 5px;
position: absolute;
top: 0;
left: 0;
}
.scroll {
width: 18px;
height: 100%;
position: absolute;
top: 0;
right: 0;
background-color: #eee;
}
.bar {
height: 100px;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: red;
border-radius: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="content" id="content">
我是文字内容，我是文字内容，我是文字内容，
我是文字内容，我是文字内容，我是文字内容，
我是文字内容，我是文字内容，我是文字内容，
我是文字内容，我是文字内容，我是文字内容，
我是文字内容，我是文字内容，我是文字内容，
我是文字内容，我是文字内容，我是文字内容，
我是文字内容，我是文字内容，我是文字内容，
我是文字内容，我是文字内容，我是文字内容，
我是文字内容，我是文字内容，我是文字内容，
我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，
我是文字内容，我是文字内容，我是文字内容，
我是文字内容，我是文字内容，我是文字内容，
我是文字内容，我是文字内容，我是文字内容，
我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，
我是文字内容，我是文字内容，我是文字内容，
我是文字内容，我是文字内容，我是文字内容，
我是文字内容，我是文字内容，我是文字内容，
我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，
我是文字内容，我是文字内容，我是文字内容，
我是文字内容，我是文字内容，我是文字内容，
我是文字内容，我是文字内容，我是文字内容，
我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，
我是文字内容，我是文字内容，我是文字内容，
我是文字内容，我是文字内容，我是文字内容，
我是文字内容，我是文字内容，我是文字内容，
我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，
我是文字内容，我是文字内容，我是文字内容，
我是文字内容，我是文字内容，我是文字内容，
我是文字内容，我是文字内容，我是文字内容，
我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，我是文字内容，
我是文字内容，我是文字内容，我是文字内容，
我是文字内容，我是文字内容，我是文字内容，
我是文字内容，我是文字内容，我是文字内容，
我是文字内容，我是文字内容，我是文字内容，
</div>
<div class="scroll" id="scroll">
<div class="bar" id="bar"></div>
</div>
</div>
<script src="common.js"></script>
<script>
var box = my$('box');
var content = my$('content');
var scroll = my$('scroll');
var bar = my$('bar');
//1 根据内容的大小，计算滚动条的高度
// 滚动条的高度 / scroll的高度 = box的高度 / 内容的高度
// offsetHeight 元素的大小 + padding + border
// clientHeight 元素的大小 + padding
// scrollHeight 内容的大小 + padding
// 当内容的高度大于box的高度，再计算 滚动条的高度，否则的话滚动条的高度为0
var barHeight = 0;
if (content.scrollHeight > box.clientHeight) {
barHeight = box.clientHeight / content.scrollHeight * scroll.clientHeight;
}
bar.style.height = barHeight + 'px';
//2 让滚动条能够拖拽
// 2.1 当鼠标按下的时候，求鼠标在滚动条中的位置
bar.onmousedown = function (e) {
e = e || window.event;
// 鼠标在滚动条中的位置
var y = getPage(e).pageY - bar.offsetTop - box.offsetTop;
// 2.2 当鼠标在页面上移动的时候，求滚动条的位置
document.onmousemove = function (e) {
//求滚动条的位置
var barY = getPage(e).pageY - y - box.offsetTop;
// 控制bar不能移除scroll
barY = barY < 0 ? 0 : barY;
barY = barY > scroll.clientHeight - bar.clientHeight ? scroll.clientHeight - bar.clientHeight : barY;
bar.style.top = barY + 'px';
//3 当拖拽滚动条的时候，改变内容的位置
// 内容滚动的距离 / 内容最大能够滚动的距离 = 滚动条滚动的距离 / 滚动条最大能够滚动的距离
// 内容最大能够滚动的距离
var contentMax = content.scrollHeight - box.clientHeight;
// 滚动条最大能够滚动的距离
var barMax = scroll.clientHeight - bar.clientHeight;
var contentY = barY / barMax * contentMax;
content.style.top = -contentY + 'px';
}
}
document.onmouseup = function () {
// 移除鼠标移动的事件
document.onmousemove = null;
}
</script>
</body>
</html>
common中的代码
function my$(id) {
return document.getElementById(id);
}
// 处理浏览器兼容性
// 获取第一个子元素
function getFirstElementChild(element) {
var node, nodes = element.childNodes, i = 0;
while (node = nodes[i++]) {
if (node.nodeType === 1) {
return node;
}
}
return null;
}
// 处理浏览器兼容性
// 获取下一个兄弟元素
function getNextElementSibling(element) {
var el = element;
while (el = el.nextSibling) {
if (el.nodeType === 1) {
return el;
}
}
return null;
}
// 处理innerText和textContent的兼容性问题
// 设置标签之间的内容
function setInnerText(element, content) {
// 判断当前浏览器是否支持 innerText
if (typeof element.innerText === 'string') {
element.innerText = content;
} else {
element.textContent = content;
}
}
// 处理注册事件的兼容性问题
// eventName, 不带on， click mouseover mouseout
function addEventListener(element, eventName, fn) {
// 判断当前浏览器是否支持addEventListener 方法
if (element.addEventListener) {
element.addEventListener(eventName, fn); // 第三个参数 默认是false
} else if (element.attachEvent) {
element.attachEvent('on' + eventName, fn);
} else {
// 相当于 element.onclick = fn;
element['on' + eventName] = fn;
}
}
// 处理移除事件的兼容性处理
function removeEventListener(element, eventName, fn) {
if (element.removeEventListener) {
element.removeEventListener(eventName, fn);
} else if (element.detachEvent) {
element.detachEvent('on' + eventName, fn);
} else {
element['on' + eventName] = null;
}
}
// 获取页面滚动距离的浏览器兼容性问题
// 获取页面滚动出去的距离
function getScroll() {
var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
return {
scrollLeft: scrollLeft,
scrollTop: scrollTop
}
}
// 获取鼠标在页面的位置，处理浏览器兼容性
function getPage(e) {
var pageX = e.pageX || e.clientX + getScroll().scrollLeft;
var pageY = e.pageY || e.clientY + getScroll().scrollTop;
return {
pageX: pageX,
pageY: pageY
}
}
//格式化日期对象，返回yyyy-MM-dd HH:mm:ss的形式
function formatDate(date) {
// 判断参数date是否是日期对象
// instanceof instance 实例(对象) of 的
// console.log(date instanceof Date);
if (!(date instanceof Date)) {
console.error('date不是日期对象')
return;
}
var year = date.getFullYear(),
month = date.getMonth() + 1,
day = date.getDate(),
hour = date.getHours(),
minute = date.getMinutes(),
second = date.getSeconds();
month = month < 10 ? '0' + month : month;
day = day < 10 ? '0' + day : day;
hour = hour < 10 ? '0' + hour : hour;
minute = minute < 10 ? '0' + minute : minute;
second = second < 10 ? '0' + second : second;
return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
}
// 获取两个日期的时间差
function getInterval(start, end) {
// 两个日期对象，相差的毫秒数
var interval = end - start;
// 求 相差的天数/小时数/分钟数/秒数
var day, hour, minute, second;
// 两个日期对象，相差的秒数
// interval = interval / 1000;
interval /= 1000;
day = Math.round(interval / 60 / 60 / 24);
hour = Math.round(interval / 60 / 60 % 24);
minute = Math.round(interval / 60 % 60);
second = Math.round(interval % 60);
return {
day: day,
hour: hour,
minute: minute,
second: second
}
}