bom案例4-模拟滚动条
<!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 } }
