您的位置：首页 > 其它

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

2017-10-15 17:06 441 查看
下面的自定义滚动条实现了三个功能，一个是对鼠标滚动的监听，一个是对鼠标拖动的监听，最后一个是对鼠标点击的监听，基本上实现了现代浏览器的滚动条功能。

<!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默认文档模式为Edge
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默认文档模式为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 || event
var disY = oEvent.clientY - child.offsetTop
document.onmousemove = function (ev) {
var oEvent = ev || event
var t = oEvent.clientY - disY
if (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 = null
document.onmouseup = null
}
return false;
}
parent.addEventListener('click', function(ev) {
var oEvent = ev || event
var t = oEvent.clientY - 1.5 * child.offsetHeight
if (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 || event
if (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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航