对拖拽的高级应用，实现自定义滚动条

来源：互联网发布：3ds max模型导出优化编辑：程序博客网时间：2024/05/20 10:23
下面的自定义滚动条实现了三个功能，一个是对鼠标滚动的监听，一个是对鼠标拖动的监听，最后一个是对鼠标点击的监听，基本上实现了现代浏览器的滚动条功能。
<!DOCTYPE html>
<html><head><meta charset = 'utf-8'><title></title><style type="text/css">#parent{width: 15px;height: 500px;background: #ccc;position: relative;margin: 10px auto;float: right;}#child{width: 15px;height: 20px;position: absolute;background: red;left: 0;top: 0; }#div1{width: 400px;height: 500px;border: 1px solid black;position: relative;overflow: hidden;float: left;margin: 10px auto;}#div2{position: absolute;left: 0; top: 0;padding: 5px;}#contain{width: 450px;height: 550px;}</style></head><body><div id = 'contain'><div id = 'parent'><div id ='child'></div></div><div id = 'div1'><div id = 'div2'>IE11浏览器默认的文档模式为Edge，但是打开有些网站的时候，在 IE11中打开F12开发人员工具，仿真模块下，文档模式选项中Internet Explorer 7显示为默认值。但是并未打开所有网站都是显示为IE7为默认文档模式，将文档模式设置为其他IE版本以后，在重新打开该网页，任然会显示为IE7。这个是什么原因呢？文档模式选项中Internet Explorer 7显示为默认值出现这种一般是两种原因所知，第一种就是网站通过meta标签定义X-UA-Compatible属性，通过这个方法就可以让IE默认以指定的文档模式进行渲染。如下代码：<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />第二种情况就是，已经将该网站添加至兼容性视图列表，想取消的话，按ALT键，显示菜单栏，找到工具里面的兼容性视图设置，如下图，在把里面的网址删除掉即可。删除兼容性视图列表中网址于是，再看看文档模式，默认为Edge，至于什么是Edge，这个小编暂时也不太清楚，有人说因为Edge是IE11的最高文档模式，是因为这样么？IE11默认文档模式为EdgeIE11浏览器默认的文档模式为Edge，但是打开有些网站的时候，在 IE11中打开F12开发人员工具，仿真模块下，文档模式选项中Internet Explorer 7显示为默认值。但是并未打开所有网站都是显示为IE7为默认文档模式，将文档模式设置为其他IE版本以后，在重新打开该网页，任然会显示为IE7。这个是什么原因呢？文档模式选项中Internet Explorer 7显示为默认值出现这种一般是两种原因所知，第一种就是网站通过meta标签定义X-UA-Compatible属性，通过这个方法就可以让IE默认以指定的文档模式进行渲染。如下代码：<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />第二种情况就是，已经将该网站添加至兼容性视图列表，想取消的话，按ALT键，显示菜单栏，找到工具里面的兼容性视图设置，如下图，在把里面的网址删除掉即可。删除兼容性视图列表中网址于是，再看看文档模式，默认为Edge，至于什么是Edge，这个小编暂时也不太清楚，有人说因为Edge是IE11的最高文档模式，是因为这样么？IE11默认文档模式为Edge</div></div></div></body><script type="text/javascript">var child = document.getElementById('child')var parent = document.getElementById('parent')var div1 = document.getElementById('div1')var div2 = document.getElementById('div2')child.onmousedown = function (ev) {var oEvent = ev || eventvar disY = oEvent.clientY - child.offsetTopdocument.onmousemove = function (ev) {var oEvent = ev || eventvar t = oEvent.clientY - disYif (t < 0) {t = 0} else if (t > parent.offsetHeight - child.offsetHeight) {t = parent.offsetHeight - child.offsetHeight};child.style.top = t + 'px'var scale = t / (parent.offsetHeight - child.offsetHeight)div2.style.top = -scale * (div2.offsetHeight - div1.offsetHeight) + 'px'}document.onmouseup = function (ev) {document.onmousemove = nulldocument.onmouseup = null}return false;}parent.addEventListener('click', function(ev) {var oEvent = ev || eventvar t = oEvent.clientY - 1.5 * child.offsetHeightif (t < 0) {t = 0} else if (t > parent.offsetHeight - child.offsetHeight) {t = parent.offsetHeight - child.offsetHeight};child.style.top = t + 'px'var scale = t / (parent.offsetHeight - child.offsetHeight)div2.style.top = -scale * (div2.offsetHeight - div1.offsetHeight) + 'px'})var str = window.navigator.userAgent.toLowerCase()function aboutScroll(t) {if (t > 0) {t = 0}else if (t <= -(div2.clientHeight - div1.clientHeight)) {t = -(div2.clientHeight - div1.clientHeight)};var scale = t / (div2.clientHeight - div1.clientHeight)var top = scale * (parent.clientHeight - child.clientHeight)div2.style.top = t + 'px'child.style.top = -top + 'px'}if (str.indexOf('firefox') != -1) {div1.addEventListener('DOMMouseScroll', function(oEvent) {oEvent.preventDefault()if (oEvent.detail < 0) {aboutScroll(div2.offsetTop + 15)} else if (oEvent.detail > 0) {aboutScroll(div2.offsetTop - 15)};})} else {div1.onmousewheel = function(ev) {var oEvent = ev || eventif (oEvent.preventDefault) {oEvent.preventDefault()} else {oEvent.returnValue = false};if (oEvent.wheelDelta > 0) {aboutScroll(d.offsetTop + 15)};if (oEvent.wheelDelta < 0) {aboutScroll(d.offsetTop - 15)};}}</script></html>
阅读全文
0 0