JavaScript Window method: scrollBy()
[this page | pdf | back links]
The scrollBy() method (when applied to Window
objects in the JavaScript
BOM) scrolls the
document by specified number of pixels.
Note: the visible property of the window’s
scrollbar needs to be set to true for this method to work.
It
has the following syntax with the following parameters. It does not return a
value.
window.scrollBy(x, y)
|
Parameter
|
Required / Optional
|
Description
|
|
x
|
Required
|
Positive or negative
number specifying number of pixels to scroll by (positive causes scroll to
right, negative scroll to the left)
|
|
y
|
Required
|
Positive or negative
number specifying number of pixels to scroll by (positive causes scroll down,
negative scroll up)
|
EXAMPLE:
HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head></head>
<body>
<button onclick="myOpen()">Open a new window</button><br>
<button onclick="myResizeBy()">Resize newly opened window: resizeBy(100,50)</button><br>
<button onclick="myResizeTo()">Resize newly opened window: resizeBy(400,400)</button><br>
<button onclick="myMoveBy()">Move newly opened window: moveBy(100,60)</button><br>
<button onclick="myMoveTo()">Move newly opened window: moveBy(300,350)</button><br>
<button onclick="myScroll()">Scroll newly opened window: scroll(80,20) [depreciated]</button><br>
<button onclick="myScrollBy()">Scroll newly opened window: scrollBy(30,60)</button><br>
<button onclick="myScrollTo()">Scroll newly opened window: scrollTo(70,30)</button><br>
<button onclick="myClose()">Close newly opened window</button>
<script>
var x;
function myOpen() {
x = window.open("","newWindow", "width=300, height=300");
x.document.write("<h3>Text in a new window - Long enough that window is likely to trigger scrolling, or adjust size to do so</h3>" +
"Note: many of these functions seem to be supported only non-intuitives by some browsers<br>" +
"1<br>2<br>3<br>4<br>5<br>6<br>7<br>" +
"8<br>9<br>10<br>11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br><h4>End</h4>");
}
function myResizeBy() { x.resizeBy(100, 50); }
function myResizeTo() { x.resizeTo(400, 400); }
function myMoveBy() { x.moveBy(100, 60); }
function myMoveTo() { x.moveTo(300, 350); }
function myScroll() { x.Scroll(80, 20); }
function myScrollBy() { x.ScrollBy(30, 60); }
function myScrollTo() { x.scrollTo(70, 30); }
function myClose() { x.close(); }
</script>
</body>
</html>
|
FUNCTION THAT MAY ASSIST IN TESTING WHETHER FEATURE IS SUPPORTED:
function isSupportedJavaScriptMethodWindowScrollBy() {
return !!window.scrollBy;
} |
NAVIGATION LINKS
Contents | Prev | Next | JavaScript DOM (and BOM)