JavaScript滚动条案例
Posted 吃蛋糕的猫
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript滚动条案例相关的知识，希望对你有一定的参考价值。
<!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; } .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 id="scroll" class="scroll"><!--装滚动条的层--> <div class="bar" id="bar"></div> <!--滚动条--> </div> </div> <script src="common.js"></script> <script> //获取所需要的元素 //获取最外面的div var box = my$("box"); //获取文字div var content = my$("content"); //获取装滚动条的div var scroll = my$("scroll"); //获取滚动条div var bar = my$("bar"); //滚动条的高 / 装滚动条的div的高 = box的高 / content的高 //滚动条的高 = box的高 * 装滚动条的div的高 / content的高 var height = box.offsetHeight * scroll.offsetHeight / content.offsetHeight; bar.style.height = height + "px"; //移动滚动条 bar.onmousedown = function (e) { var spaceY = e.clientY - bar.offsetTop; document.onmousemove = function (e) { var y = e.clientY - spaceY; y = y < 0 ? 0 : y; y = y > scroll.offsetHeight - bar.offsetHeight ? scroll.offsetHeight - bar.offsetHeight : y; bar.style.top = y + "px"; //设置鼠标移动时文字不被选中 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty(); //设置文字的移动距离 //滚动条的移动距离 / 文字的移动距离 = 滚动条的最大移动距离 / 文字最大的移动距离 //文字的移动距离 = 滚动条的移动距离 * 文字最大的移动距离 / 滚动条最大的移动距离 var moveY = y * (content.offsetHeight - box.offsetHeight) / (scroll.offsetHeight - bar.offsetHeight); content.style.top = -moveY + "px"; }; document.onmouseup = function () { document.onmousemove = null; }; }; </script> </body> </html>
common.js
/** * Created by Administrator on 2018/8/18. */ /** * Created by Administrator on 2016/7/27. */ /** * Created by Administrator on 2016/7/21. * * 次文件来自 很牛x的程序员 . * * 作者:无名 */ /* * 该函数是返回的是指定格式的日期,是字符串类型 * 参数:date ----日期 * 返回值: 字符串类型的日期 * */ function getDatetoString(date) { var strDate;//存储日期的字符串 //获取年 var year = date.getFullYear(); //获取月 var month = date.getMonth() + 1; //获取日 var day = date.getDate(); //获取小时 var hour = date.getHours(); //获取分钟 var minute = date.getMinutes(); //获取秒 var second = date.getSeconds(); hour = hour < 10 ? "0" + hour : hour; minute = minute < 10 ? "0" + minute : minute; second = second < 10 ? "0" + second : second; //拼接 strDate = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;//隐藏问题,关于变量声明的位置 return strDate; } //根据id获取元素对象 function my$(id) { return document.getElementById(id); } /* * * innerText属性IE中支持 * textContent火狐中支持 * dvObj.innerText="您好";设置innerText的值 * console.log(dvObj.innerText);获取innerText的值 * 因为上述原因,inerText有时候需要设置值，有时候需要获取值 * 所以,需要写一个兼容的代码能在火狐中使用,也可以在IE中使用 * * * */ /* *设置innerText属性的值 * element-----为某个元素设置属性值 * content-----设置的值 * */ function setInnerText(element, content) { if (typeof element.textContent === "undefined") { //IE浏览器 element.innerText = content; } else { element.textContent = content; } } /* * 获取innerText属性的值 * element 要获取的元素 * 返回的是该元素的innerText值 * */ function getInnerText(element) { if (typeof element.textContent === "undefined") { //IE浏览器 return element.innerText; } else { return element.textContent; } } //获取当前元素前一个元素 function getPreviousElement(element) { if (element.previousElementSibling) { return element.previousElementSibling; } else { var ele = element.previousSibling; while (ele && ele.nodeType !== 1) { ele = ele.previousSibling; } return ele; } } //获取当前元素的后一个元素 function getNextElement(element) { if (element.nextElementSibling) { return element.nextElementSibling; } else { var ele = element.nextSibling; while (ele && ele.nodeType !== 1) { ele = ele.nextSibling; } return ele; } } //获取父元素中的第一个元素 function getFirstElementByParent(parent) { if (parent.firstElementChild) { return parent.firstElementChild; } else { var ele = parent.firstChild; while (ele && ele.nodeType !== 1) { ele = ele.nextSibling; } return ele; } } //获取父元素中的最后一个元素 function getLastElementByParent(parent) { if (parent.lastElementChild) { return parent.lastElementChild; } else { var ele = parent.lastChild; while (ele && ele.nodeType !== 1) { ele = ele.previousSibling; } return ele; } } //获取兄弟元素 function getsiblings(ele) { if (!ele)return;//判断当前的ele这个元素是否存在 var elements = [];//定义数组的目的就是存储当前这个元素的所有的兄弟元素 var el = ele.previousSibling;//当前元素的前一个节点 while (el) { if (el.nodeType === 1) {//元素 elements.push(el);//加到数组中 } el = el.previousSibling; } el = ele.nextSibling; while (el) { if (el.nodeType === 1) { elements.push(el); } el = el.nextSibling; } return elements; } // //能力检测多个浏览器为同一个对象注册多个事件 var EventTools = { //为对象添加注册事件 addEventListener: function (element, eventName, listener) { if (element.addEventListener) { element.addEventListener(eventName, listener, false); } else if (element.attachEvent) { element.attachEvent("on" + eventName, listener) } else { element["on" + eventName] = listener; } }, //为对象移除事件 removeEventListener: function (element, eventName, listener) { if (element.removeEventListener) { element.removeEventListener(eventName, listener, false); } else if (element.detachEvent) { element.detachEvent("on" + eventName, listener); } else { element["on" + eventName] = null; } }, //获取参数e getEvent: function (e) { return e || window.event; }, getPageX: function (e) { if (e.pageX) { return e.pageX; } else { //有的浏览器把高度设计在了文档的第一个元素中了 //有的浏览器把高度设计在了body中了 //document.documentElement.scrollTop;//文档的第一个元素 //document.body.scrollTop; var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; return e.clientX + scrollLeft; } }, getPageY: function (e) { if (e.pageY) { return e.pageY; } else { var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; return e.clientY + scrollTop; } } };
以上是关于JavaScript滚动条案例的主要内容，如果未能解决你的问题，请参考以下文章
[TimLinux] JavaScript 代码控制滚动条移动到顶部/底部
音频处理Melodyne 网络缩放功能 ( 音符分离线 | 片段分离线 | 窗口滚动条 | 网格缩放 | 修改图像显示位置 | 显示五线谱 )