쳉에 : 드래그 페이지에있는 상자 , 페이지 내에서 드래그, 드래그하여 페이지 내에서 문제를 해결하기 위해 텍스트를 선택
DIV2를 만들고 DIV2에서 div3에 포함. div3 폭 문자 DIV2 높은 산만으로 정의. 이제 우리는 div3 텍스트 스크롤에, 당신은 스크롤 막대가 빨간색 블록의 왼쪽에서 오른쪽으로, div3 텍스트도 롤링됩니다에서 스크롤 할 수있는 스크롤 막대를 필요로합니다.
새로운 스크롤 막대. 옮겨 div1 부모에 대해 부모 DIV 좌표를, 좌우 폭 때 서서히 0 내지 1 가변 스케일의 존재 비율을 변경한다.
<!DOCTYPE html>
<html>
<head>
<title>自定义滚动条</title>
</head>
<body>
<div id="parent">
<div id="div1"></div>
</div>
</body>
<style type="text/css">
#parent{width: 600px; height: 20px; background-color: #CCC; position: relative; margin: 0 auto; }
#div1{ width: 20px; height: 20px; background-color: red; position: absolute; left: 0; top: 0; }
</style>
<script type="text/javascript">
var oDiv1 = document.getElementById('div1');
var oParent = document.getElementById('parent');
var disX = 0;
oDiv1.onmousedown = function(ev){
disX = ev.clientX - oDiv1.offsetLeft;
document.onmousemove = function(ev){
var l = ev.clientX - disX;
if (l<0) {
l = 0;
} else if(l>oParent.offsetWidth-oDiv1.offsetWidth){
l = oParent.offsetWidth-oDiv1.offsetWidth;
}//div块不超出左右两边
oDiv1.style.left = l + 'px';
var scale = l/(oParent.offsetWidth-oDiv1.offsetWidth);
document.title = scale;
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};
};
</script>
</html>최고 값 아래 Div3, 눈금 표시. 당신은 완전한 스크롤 예를 얻을 수 있습니다. 스케일 * 감산 (oDiv3.offsetHeight-oDiv2.offsetHeight) 마지막 텍스트 박스에 남아 있도록 DIV2의 높이를 감산. 나는 효과를 볼 수, -oDiv2.offsetHeight을 제거 할 수있는 사람을 이해하지 않습니다. 스크롤링 텍스트의 방향을 제어하기 위해서는 규모의 앞에 마이너스 기호. 예는 다음과 같다
<!DOCTYPE html>
<html>
<head>
<title>自定义滚动条</title>
</head>
<body>
<div id="parent">
<div id="div1"></div>
</div>
<div id="div2">
<div id="div3">
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。 [1]
JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。 [2]
JavaScript的标准是ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript 的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES6。
</div>
</div>
</body>
<style type="text/css">
#parent{width: 600px; height: 20px; background-color: #CCC; position: relative; margin: 0 auto; }
#div1{ width: 20px; height: 20px; background-color: red; position: absolute; left: 0; top: 0; }
#div2{ width: 300px; height: 200px; border: 1px solid black; overflow: hidden; position: relative; margin: 30px auto; }
#div3{ position: absolute; left: 0; top: 0; }
</style>
<script type="text/javascript">
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
var oParent = document.getElementById('parent');
var disX = 0;
var disY = 0;
oDiv1.onmousedown = function(ev){
disX = ev.clientX - oDiv1.offsetLeft;
document.onmousemove = function(ev){
var l = ev.clientX - disX;
if (l<0) {
l = 0;
} else if(l>oParent.offsetWidth-oDiv1.offsetWidth){
l = oParent.offsetWidth-oDiv1.offsetWidth;
}//div块不超出左右两边
oDiv1.style.left = l + 'px';
var scale = l/(oParent.offsetWidth-oDiv1.offsetWidth);
document.title = scale;
oDiv3.style.top = -scale*(oDiv3.offsetHeight-oDiv2.offsetHeight)+'px';
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};
};
</script>
</html>
