そのまま表示

<html>
<meta http-equiv="content-type" charset="utf-8">
<head>
<title>Test11_ScrollBar</title>
</head>
<body>

Wak_StartPos:<span id="Wak_StartPos"></span><br>
Wak_Width:<span id="Wak_Width"></span><br>
Box_StartPos:<span id="Box_StartPos"></span><br>
Box_Width:<span id="Box_Width"></span><br>
Box_LeftPos:<span id="Box_LeftPos"></span><br>
Box_PosX:<span id="Box_PosX"></span><br>
Mouse_Offset:<span id="Mouse_Offset"></span><br>
Mouse_Button:<span id="Mouse_Button"></span><br>
onmousedown_event_clientX:<span id="onmousedown_event_clientX"></span><br>
Wak_BWidth:<span id="Wak_BWidth"></span><br>
<br>
<br>

<div id="app">
Min:<span id="Box_Min">-120</span>
<canvas id="Wak_CanvasID" width="400" height="100"></canvas>
Value:<span id="Box_Val"></span>
Max:<span id="Box_Max">480</span>
<canvas id="Box_CanvasID" width="100" height="100"></canvas>
</div>

SetValue_SbMin:<span id="SetValue_SbMin"></span><br>
SetValue_SbMax:<span id="SetValue_SbMax"></span><br>
SetValue_SbPos:<span id="SetValue_SbPos"></span><br>
SetValue_SbPct:<span id="SetValue_SbPct"></span><br>
SetValue_VlMin:<span id="SetValue_VlMin"></span><br>
SetValue_VlMax:<span id="SetValue_VlMax"></span><br>

<script language="JavaScript">
//=========================================================================================================================

var Wak_Element = document.getElementById("Wak_CanvasID");
var Box_Element = document.getElementById("Box_CanvasID");
var Box_PosX=0;
var Box_Value=0;
var Mouse_Offset=0;

window.onload = (event) => {
	
	// Waku
	var Wak_Context = Wak_Element.getContext("2d");
	Wak_Context.strokeRect(0, 0, Wak_Element.getBoundingClientRect().width
	                           , Wak_Element.getBoundingClientRect().height);
	
	// Box
	Box_Element.style.position = "absolute";
	Box_Element.style.top  = Wak_Element.getBoundingClientRect().top  + "px";
	Box_Element.style.left = Wak_Element.getBoundingClientRect().left + "px";
	
	var Box_Context = Box_Element.getContext("2d");
	Box_Context.fillStyle = "rgb(127, 127, 127)";
	Box_Context.fillRect(0, 0, Box_Element.getBoundingClientRect().width
	                         , Box_Element.getBoundingClientRect().height);
	Box_PosX = Box_Element.getBoundingClientRect().left;
	
	SetValue();
	
	// DebugOut
	document.getElementById("Box_PosX").innerHTML = Box_PosX;
	document.getElementById("Box_StartPos").innerHTML = Box_Element.getBoundingClientRect().left;
	document.getElementById("Box_Width").innerHTML = Box_Element.getBoundingClientRect().width;
}

// Debug
document.getElementById("Box_PosX").onclick = (event) => {
	document.getElementById("Box_PosX").innerHTML = Box_PosX;
};

// MouseDownEvent
Box_Element.onmousedown = (event) => {
	MouseDownEve(event,"mousemove");
}
Box_Element.onpointerdown = (event) => {
	MouseDownEve(event,"pointermove");
}
function MouseDownEve(event,EventName){
	
	Mouse_Offset = event.clientX - Box_PosX;
	
	document.getElementById("Box_LeftPos").innerHTML = Box_Element.style.left;
	document.getElementById("Mouse_Offset").innerHTML = Mouse_Offset;
	document.getElementById("onmousedown_event_clientX").innerHTML = event.clientX;
	
	document.addEventListener(EventName,OnMouseMove);
}

// MouseUpEvent
Box_Element.onmouseup = (event) => {
	MouseUpEve("mousemove");
}
Box_Element.onpointerup = (event) => {
	MouseUpEve("pointermove");
}
function MouseUpEve(EventName){
	document.removeEventListener(EventName,OnMouseMove);
}

// MouseMove
var OnMouseMove = (event) => {
	
	if(event.buttons !== undefined){
		
		// DebugOut
		document.getElementById("Mouse_Button").innerHTML = event.buttons & 1;
		
		if( (event.buttons & 1) != 1 ){
			MouseUpEve("mousemove");
			MouseUpEve("pointermove");
			return;
		}
		
	}
	
	Box_PosX = event.clientX - Mouse_Offset;
	
	// Left MaxLimit
	var LMax = Wak_Element.getBoundingClientRect().left;
	if( Box_PosX < LMax ){
		Box_PosX = LMax;
	}
	
	// Right MaxLimit
	var RMax = Wak_Element.getBoundingClientRect().width
	         - Box_Element.getBoundingClientRect().width
	         + Wak_Element.getBoundingClientRect().left;
	if( Box_PosX > RMax ){
		Box_PosX = RMax;
	}
	
	Box_Element.style.left = Box_PosX + "px";
	
	SetValue();
	
	// DebugOut
	document.getElementById("Box_LeftPos").innerHTML = Box_Element.style.left;
	document.getElementById("Box_PosX").innerHTML = Box_PosX;
}

function SetValue(){
	
	var SbMin = Wak_Element.getBoundingClientRect().left;
	var SbMax = Wak_Element.getBoundingClientRect().width
	          - Box_Element.getBoundingClientRect().width
	          + Wak_Element.getBoundingClientRect().left;
	var SbPos = Box_PosX;
	
	var SbPct = ( SbPos - SbMin ) / ( SbMax - SbMin );
	
	var VlMin = Number(document.getElementById("Box_Min").innerHTML);
	var VlMax = Number(document.getElementById("Box_Max").innerHTML);
	
	var Box_Value = SbPct * ( VlMax - VlMin ) + VlMin;
	
	// DebugOut
	document.getElementById("SetValue_SbMin").innerHTML = SbMin;
	document.getElementById("SetValue_SbMax").innerHTML = SbMax;
	document.getElementById("SetValue_SbPos").innerHTML = SbPos;
	document.getElementById("SetValue_SbPct").innerHTML = SbPct;
	document.getElementById("SetValue_VlMin").innerHTML = VlMin;
	document.getElementById("SetValue_VlMax").innerHTML = VlMax;
	document.getElementById("Box_Val").innerHTML = parseInt(Box_Value);
}

</script>

</body>
</html>
＜＜　広告　＞＞