jsスクロールバーの書き換え
23445 ワード
いくつかの複雑なシナリオでは、スクロールバーを書き換える必要があります.demoをなくしてから最適化します.
<html>
<head>
<meta charset="utf-8">
<title> title>
<meta name="keywords" content="">
<meta name="description" content="">
<style>
*{margin:0; padding:0; list-style:none;}
body{
height:2000px;
}
.box1{
width: 320px;
height: 400px;
background: #ccc;
overflow: hidden;
overflow-y: scroll;
margin: 20px 0 0 100px;
}
.con1{
font-size: 18px;
}
#out{
width: 280px;
height: 400px;
background: url(bg1.png) 0 0 repeat-x;
position: absolute;
left: 500px;
top: 20px;
overflow: hidden;
}
#con{
width: 360px;
padding: 5px;
font-size: 18px;
position: absolute;
left: 0px;
top: 0px;
}
#box{
width: 30px;
position: absolute;
right: 0;
top: 0;
bottom: 0;
background: #fff;
}
#drag{
width: 30px;
height: 53px;
background: black;
position: absolute;
left: 0px;
top: 0px;
}
#horizntalbox{
height: 30px;
width: 100%;
position: absolute;
right: 0;
left: 0;
bottom: 0;
background: #fff;
}
#hdrag{
width: 53px;
height: 30px;
background: black;
position: absolute;
left: 0px;
bottom: 0px;
}
style>
head>
<body>
<div class="box1">
<p class="con1"> 、 8 6 ， 、 ， ， 。
： ； ， ， 、 、 。
6 ， ， ， 、 、 、 、 、 、 、 ， 。
“ ”： ， 、 ， ， “ ” 。 ， 、 、 ， 。 ， 141 ，50 179 ， 57 ， 27 。
“ ， 、 、 。” ， ， ， 。p>
div>
<div id="out">
<div id="con"> 、 8 6 ， 、 ， ， 。
： ； ， ， 、 、 。
6 ， ， ， 、 、 、 、 、 、 、 ， 。
“ ”： ， 、 ， ， “ ” 。 ， 、 、 ， 。 ， 141 ，50 179 ， 57 ， 27 。
“ ， 、 、 。” ， ， ， 。
、 8 6 ， 、 ， ， 。
： ； ， ， 、 、 。
6 ， ， ， 、 、 、 、 、 、 、 ， 。
“ ”： ， 、 ， ， “ ” 。 ， 、 、 ， 。 ， 141 ，50 179 ， 57 ， 27 。
“ ， 、 、 。” ， ， ， 。div>
<div id="box">
<p id="drag">p>
div>
<div id="horizntalbox">
<p id="hdrag">p>
div>
div>
<script>
var out=document.getElementById('out');
var con=document.getElementById('con');
var box=document.getElementById('box');
var drag=document.getElementById('drag');
var horiBox=document.getElementById('horizntalbox');
var hDrag=document.getElementById('hdrag');
drag.onmousedown=function (ev){
var e=ev||window.event;
if (e.preventDefault) {
e.preventDefault();
} else{
e.returnValue=false;
};
var d_bkt=e.clientY-drag.offsetTop;
document.onmousemove=function (ev){
var e=ev||window.event;
var top=e.clientY-d_bkt;
if (top<=0) {
top=0;
};
if (top>=box.clientHeight-drag.clientHeight) {
top=box.clientHeight-drag.clientHeight;
};
var scale=top/(box.clientHeight-drag.clientHeight);
var cony=scale*(con.clientHeight-out.clientHeight);
drag.style.top=top+'px';
con.style.top=-cony+'px';
console.log(top);
}
document.onmouseup=function (){
document.onmousemove=null;
}
};
hDrag.onmousedown = function (ev) {
var e = ev || window.event;
if (e.preventDefault) {
e.preventDefault();
} else{
e.returnValue=false;
};
var d_bkt=e.clientX-hDrag.offsetLeft;
document.onmousemove=function (ev){
var e=ev||window.event;
var left=e.clientX-d_bkt;
if (left<=0) {
left=0;
};
if (left>=horiBox.clientWidth-hDrag.clientWidth) {
left=horiBox.clientWidth-hDrag.clientWidth;
};
var scale=left/(horiBox.clientWidth-hDrag.clientWidth);
var cony=scale*(con.clientWidth-out.clientWidth);
hDrag.style.left=left+'px';
con.style.left=-cony+'px';
console.log(left);
};
document.onmouseup=function (){
document.onmousemove=null;
}
};
var str=window.navigator.userAgent.toLowerCase();
if (str.indexOf('firefox')!=-1) {//
out.addEventListener('DOMMouseScroll',function (e){
e.preventDefault();//
if (e.detail<0) {
var t=con.offsetTop+20;
if (t>=0) {
t=0;
};
if (t<=-(con.clientHeight-out.clientHeight)) {
t=-(con.clientHeight-out.clientHeight);
};
var scale=t/(con.clientHeight-out.clientHeight);
var top=scale*(box.clientHeight-drag.clientHeight);
con.style.top=t+'px';
drag.style.top=-top+'px';
};
if (e.detail>0) {
var t=con.offsetTop-20;
if (t>=0) {
t=0;
};
if (t<=-(con.clientHeight-out.clientHeight)) {
t=-(con.clientHeight-out.clientHeight);
};
var scale=t/(con.clientHeight-out.clientHeight);
var top=scale*(box.clientHeight-drag.clientHeight);
con.style.top=t+'px';
drag.style.top=-top+'px';
};
},false);
} else{//
out.onmousewheel=function (ev){
var e=ev||window.event;
if (e.preventDefault) {
e.preventDefault();
} else{
e.returnValue=false;
};
if (e.wheelDelta>0) {
var t=con.offsetTop+20;
if (t>=0) {
t=0;
};
if (t<=-(con.clientHeight-out.clientHeight)) {
t=-(con.clientHeight-out.clientHeight);
};
var scale=t/(con.clientHeight-out.clientHeight);
var top=scale*(box.clientHeight-drag.clientHeight);
con.style.top=t+'px';
drag.style.top=-top+'px';
};
if (e.wheelDelta<0) {
var t=con.offsetTop-20;
if (t>=0) {
t=0;
};
if (t<=-(con.clientHeight-out.clientHeight)) {
t=-(con.clientHeight-out.clientHeight);
};
var scale=t/(con.clientHeight-out.clientHeight);
var top=scale*(box.clientHeight-drag.clientHeight);
con.style.top=t+'px';
drag.style.top=-top+'px';
};
}
};
script>
body>
html>