JavaScript DHTML/Javascript Objects/Window Scroll
Содержание
Move window by value
<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM name="myform">
<INPUT TYPE="button" value="Move Window" onClick="window.moveBy(10,10);">
<P>
<INPUT TYPE="button" value="Set a Position" onClick="window.moveTo(240,200);">
<P>
<INPUT TYPE="button" value="Close Window" onClick="window.close();">
</FORM>
</BODY>
</HTML>
Move window to a position
<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM name="myform">
<INPUT TYPE="button" value="Move Window" onClick="window.moveBy(10,10);">
<P>
<INPUT TYPE="button" value="Set a Position" onClick="window.moveTo(240,200);">
<P>
<INPUT TYPE="button" value="Close Window" onClick="window.close();">
</FORM>
</BODY>
</HTML>
Window "scrollBy()" Example
<html>
<body>
<script language="JavaScript">
function function1(){
window.scrollBy(200,200);
}
</script>
<input type="button" value="Scroll by (200,200)" onClick="function1();">
<div style="height:1000px;width:1400;background-color:blue"></div>
</body>
</html>
Window "scroll()" Example
<html>
<body>
<script language="JavaScript">
function function1(){
window.scrollTo(200,200);
}
function function2(){
window.scroll(400,400);
}
</script>
<input type="button" value="Scroll to (200,200)" onClick="function1();">
<input type="button" value="Scroll(400,400)" onClick="function2();">
<div style="height:1000;width:1500;background-color:blue;"></div>
</body>
</html>
Window "scrollHeight" Example
<html>
<body>
<script language="JavaScript">
function function2() {
myX.innerHTML = window.event.offsetX;
myY.innerHTML = window.event.offsetY;
mySX.innerHTML = window.event.screenX;
mySY.innerHTML = window.event.screenY;
mySH.innerHTML = myDiv.scrollHeight;
mySW.innerHTML = myDiv.scrollWidth;
}
function function1() {
mySL.innerHTML = myDiv.scrollLeft;
myST.innerHTML = myDiv.scrollTop;
}
</script>
<p>
<b>X Coordinate:</b>
<span id="myX">0</span>
</p>
<p>
<b>Y Coordinate:</b>
<span id="myY">0</span>
</p>
<p>
<b>Screen X:</b>
<span id="mySX">0</span>
</p>
<p>
<b>Screen Y:</b>
<span id="mySY">0</span>
</p>
<p>
<b>Scroll Height:</b>
<span id="mySH">0</span>
</p>
<p>
<b>Scroll Width:</b>
<span id="mySW">0</span>
</p>
<p>
<b>Scroll Left:</b>
<span id="mySL">0</span>
</p>
<p>
<b>Scroll Top:</b>
<span id="myST">0</span>
</p>
<div id="myDiv"
onmousemove="function2();"
onscroll="function1();"
style="border:solid; width:200; height:50; overflow:scroll;">
<img src="yourimage.gif">
</div>
</body>
</html>
Window "scrollLeft" Example
<html>
<body>
<script language="JavaScript">
function function2() {
myX.innerHTML = window.event.offsetX;
myY.innerHTML = window.event.offsetY;
mySX.innerHTML = window.event.screenX;
mySY.innerHTML = window.event.screenY;
mySH.innerHTML = myDiv.scrollHeight;
mySW.innerHTML = myDiv.scrollWidth;
}
function function1() {
mySL.innerHTML = myDiv.scrollLeft;
myST.innerHTML = myDiv.scrollTop;
}
</script>
<p>
<b>X Coordinate:</b>
<span id="myX">0</span>
</p>
<p>
<b>Y Coordinate:</b>
<span id="myY">0</span>
</p>
<p>
<b>Screen X:</b>
<span id="mySX">0</span>
</p>
<p>
<b>Screen Y:</b>
<span id="mySY">0</span>
</p>
<p>
<b>Scroll Height:</b>
<span id="mySH">0</span>
</p>
<p>
<b>Scroll Width:</b>
<span id="mySW">0</span>
</p>
<p>
<b>Scroll Left:</b>
<span id="mySL">0</span>
</p>
<p>
<b>Scroll Top:</b>
<span id="myST">0</span>
</p>
<div id="myDiv"
onmousemove="function2();"
onscroll="function1();"
style="border:solid; width:200; height:50; overflow:scroll;">
<img src="yourimage.gif">
</div>
</body>
</html>
Window "scrollTo()" Example
<html>
<body>
<script language="JavaScript">
function function1(){
window.scrollTo(200,200);
}
function function2(){
window.scroll(400,400);
}
</script>
<input type="button" value="Scroll to (200,200)" onClick="function1();">
<input type="button" value="Scroll(400,400)" onClick="function2();">
<div style="height:1000;width:1500;background-color:blue;"></div>
</body>
</html>
Window "scrollTop" Example
<html>
<body>
<script language="JavaScript">
function function2() {
myX.innerHTML = window.event.offsetX;
myY.innerHTML = window.event.offsetY;
mySX.innerHTML = window.event.screenX;
mySY.innerHTML = window.event.screenY;
mySH.innerHTML = myDiv.scrollHeight;
mySW.innerHTML = myDiv.scrollWidth;
}
function function1() {
mySL.innerHTML = myDiv.scrollLeft;
myST.innerHTML = myDiv.scrollTop;
}
</script>
<p>
<b>X Coordinate:</b>
<span id="myX">0</span>
</p>
<p>
<b>Y Coordinate:</b>
<span id="myY">0</span>
</p>
<p>
<b>Screen X:</b>
<span id="mySX">0</span>
</p>
<p>
<b>Screen Y:</b>
<span id="mySY">0</span>
</p>
<p>
<b>Scroll Height:</b>
<span id="mySH">0</span>
</p>
<p>
<b>Scroll Width:</b>
<span id="mySW">0</span>
</p>
<p>
<b>Scroll Left:</b>
<span id="mySL">0</span>
</p>
<p>
<b>Scroll Top:</b>
<span id="myST">0</span>
</p>
<div id="myDiv"
onmousemove="function2();"
onscroll="function1();"
style="border:solid; width:200; height:50; overflow:scroll;">
<img src="http://www.wbex.ru/style/logo.png">
</div>
</body>
</html>
Window "scrollWidth" Example
<html>
<body>
<script language="JavaScript">
function function2() {
myX.innerHTML = window.event.offsetX;
myY.innerHTML = window.event.offsetY;
mySX.innerHTML = window.event.screenX;
mySY.innerHTML = window.event.screenY;
mySH.innerHTML = myDiv.scrollHeight;
mySW.innerHTML = myDiv.scrollWidth;
}
function function1() {
mySL.innerHTML = myDiv.scrollLeft;
myST.innerHTML = myDiv.scrollTop;
}
</script>
<p>
<b>X Coordinate:</b>
<span id="myX">0</span>
</p>
<p>
<b>Y Coordinate:</b>
<span id="myY">0</span>
</p>
<p>
<b>Screen X:</b>
<span id="mySX">0</span>
</p>
<p>
<b>Screen Y:</b>
<span id="mySY">0</span>
</p>
<p>
<b>Scroll Height:</b>
<span id="mySH">0</span>
</p>
<p>
<b>Scroll Width:</b>
<span id="mySW">0</span>
</p>
<p>
<b>Scroll Left:</b>
<span id="mySL">0</span>
</p>
<p>
<b>Scroll Top:</b>
<span id="myST">0</span>
</p>
<div id="myDiv"
onmousemove="function2();"
onscroll="function1();"
style="border:solid; width:200; height:50; overflow:scroll;">
<img src="http://www.wbex.ru/style/logo.png">
</div>
</body>
</html>