JavaScriptを：カスタムスクロールバー

上のチェン：ドラッグページでボックス、ページ内のドラッグ、ページ内の問題を解決するためにドラッグし、選択したテキスト

DIV2を作成し、DIV2でDIV3に埋め込まれました。DIV2、文字による高気晴らしによって定義されたDIV3幅。今、私たちは、スクロール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、目盛り。あなたは完全なスクロールの例を得ることができます。最終のテキストボックス内に残るようにDIV2の高さを減算し、減算の規模*（oDiv3.offsetHeight-oDiv2.offsetHeight）。私は、効果を確認するために、-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>

陳Xuejun

公開された126元の記事・ウォン称賛7 ・ビュー10000 +

プライベートの手紙の懸念

JavaScriptを：カスタムスクロールバー

おすすめ