<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>自定义滚动条</title>
<link rel="stylesheet" href="">
<style type="text/css">
#warpper {
width: 500px;
height: 300px;
margin: 200px;
position: relative;
}
#contentWrapper{
width: 480px;
height: 300px;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
#content {
width: 480px;
height: auto;
position: absolute;
top: 0;
left: 0;
line-height: 30px;
}
#scrollbarp {
width: 20px;
background-color: blue;
height: 300px;
position: absolute;
right: 0;
top: 0;
}
#scrollbar {
width: 20px;
background-color: red;
height: 30px;
position: absolute;
top: 0px;
right: 0px;
cursor: hand;
}
</style>
<script type="text/javascript">
window.onload = function() {
var content = document.getElementById("content");
var scrollbar = document.getElementById("scrollbar");
var scrollbarp = document.getElementById("scrollbarp");
var wrapper = document.getElementById("warpper");
// contentMaxT--包裹内容的div最大的top值
var contentMaxT = content.offsetHeight-contentWrapper.offsetHeight;
var TMax = scrollbarp.offsetHeight - scrollbar.offsetHeight;
scrollbar.onmousedown = function(e) {
//记录鼠标的位置，滚动条当前的top
var e = e || window.event;
/***
鼠标按下的时候,记录Y轴偏移距离
这个距离是一个比较的偏移位置
当鼠标滑动的时候鼠标变化的位置，减去鼠标按下的时候
记录的偏移位置，就是滚动条要移动的位置
***/
var disY = e.clientY - this.offsetTop;
console.log("down: disY : "+disY+" cy: "+e.clientY+"-----top： "+this.offsetTop);
if(scrollbar.setCapture){
scrollbar.setCapture();
}
document.onmousemove = function(ev) {
var ev = ev || window.event;
var T = ev.clientY - disY;
fixTop(T);
return false;
}
document.onmouseup = function() {
document.onmouseup = document.onmousemove = null;
if(scrollbar.releaseCapture){
scrollbar.releaseCapture();
}
}
return false;
}
function fixTop(T){
console.log("T ;;;;: "+T);
if (T < 0) {
T = 0;
}
if (T > TMax) {
T = TMax;
}
var scale = T / TMax;
content.style.top = -scale * contentMaxT+"px";
scrollbar.style.top = T + "px";
}
//当鼠标移入的时候对包裹的内容进行鼠标滚轮事件监听,每次加三个像素
wrapper.onmouseover = function(e){
var e = e || window.event;
// e.stopPropgation?e.stopPropgation():e.cancleBubble = true;
//对内容添加鼠标滚轮事件window.onmousewheel=document.onmousewheel
if((window.navigator.userAgent).indexOf("Firefox")>-1){
console.log("火狐");
wrapper.addEventListener("DOMMouseScroll",fixScroll,false);
}else{
console.log("非火狐");
wrapper.focus();//IE下有时候获取焦点有问题，这个修复
wrapper.onmousewheel= fixScroll;
}
//火狐浏览器是添加DOMMouseScroll事件--e.detail 3
wrapper.onmouseout = function(){
wrapper.onmouseout = wrapper.onmousewheel = null;
if((window.navigator.userAgent).indexOf("Firefox")>-1){
wrapper.removeEventListener("DOMMouseScroll",fixScroll,false);}
}
return false;
}
function fixScroll(e){
var e = e || window.event;
var value = e.wheelDelta?e.wheelDelta:-(e.detail);
console.log("事件监听 value: "+value);
e.preventDefault?e.preventDefault():e.returnValue = false;
e.stopPropgation?e.stopPropgation():e.cancleBubble = true;
var stylesTop = scrollbar.currentStyle?scrollbar.currentStyle["top"]:document.defaultView.getComputedStyle(scrollbar,null)["top"];
var myT = parseFloat(stylesTop);
value>0?(myT-=30):(myT+=30);
fixTop(myT);
}
}
</script>
</head>
<body>
<div id="warpper">
<span id="contentWrapper">
<span id="content">
0水电费使得房贷首付使得房贷首付水电费使得房贷首付水电费使得</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费使得房贷首付水电费使得</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费使得房贷首付水电费使得</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费使得房贷首付水电费使得</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费使得房贷首付水电费使得</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
</span>
</span>
<span id="scrollbarp">
<span id="scrollbar"></span>
</span>
</div>
</body>
</html>
分享到：
相关推荐
今天特意整理了一款js实现的图片横向自定义滚动条效果，兼容目前主要浏览器（IE6已被忽略）。 喜欢的童鞋可以拿去试试 使用方法： 1、在网页head中调用lanrenzhijia.css样式以及lanrenzhijia.js 2...
js 自定义滚动条样式 颜色大小在css调节 绑定节点在js代码第一个函数修改
javascript实现自定义滚动条效果 在实际项目中，遇到上下滚动条和左右滚动条不在一个DIV内部，所以某些情况下，右侧滚动条不可见。但是需要咋同一个视口内显示两个滚动条。 一个解决思路是：自定义滚动条，隐藏...
div+css、js实现div的下拉条，自定义的
DIV+css+js打造的滚动条，特别个性。
使用jquery.layout.js布局，并且使用自定义滚动条
本文实例为大家分享了JS自定义滚动条效果的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>自定义滚动条</title> <style...
系统自带的滚动条样式不要，css定义的滚动条样式太单调，现在有一个可以使用图片来定义滚动条哦。
但是用浏览器默认的滚动条经常被产品经理鄙视，可是用css却改变不了滚动条的样式，还好，有万能的js ^_^~~ 网上有各种各样的插件，但最顺手的还是自己写的，还可以一边撸一边当学习，自己动手丰衣足食 (*^__^*) 其中...
jquery自定义滚动条.zip
小程序3D轮播图与自定义滚动条
UI JQuery自定义滚动条插件.zip
自定义滚动条美化jQuery插件.zip
本文实例讲述了JS实现的页面自定义滚动条效果。分享给大家供大家参考，具体如下： 这里演示网页上用的滚动条效果，是一个自定义的滚动条代码，除了上下两个箭头以外，滚动条和一般的浏览器基本差不多，鼠标滚轮滚动...
自动生成滚动条样式 + 颜色选择器 网页编辑必备
高质量自定义滚动条特效代码.zip
本文实例为大家分享了JS自定义滚动条的具体代码，供大家参考，具体内容如下 <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #all{ width: 500px; ...
tailwindcss-滚动条Tailwindcss插件可自定义... } , plugins : [ require ( '@gradin/tailwindcss-scrollbar' ) , ] ,}配置您可以自定义滚动条的大小和颜色。 module . exports = { theme : { // ... } , plugins : [
Vue 2滚动条具有自定义滚动条的最简单滚动区域组件。 它基于 。 所有动画，高度和宽度都是纯CSS，因此完全可以自定义和负责任！ 是的！。安装您可以像将导入到vue组件文件中，并使用预处理器对其进行处理。 您可以...